body {
    height: auto;
}
[draggable] {
    cursor: move;
}

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100vh;
}

.designer {
    border-color: #4B515D;
    border-radius: 5px;
    /*border-style: solid;*/
    /*border-width: 1px;*/
    float: left;
    height: 600px;
    width: 1200px;
    background: linear-gradient(#f5f7fa, #c3cfe2)
}

.controlPanel {
    margin:20px;
    vertical-align: middle;
    display: inline-block;
}

.framePicker {
    /*clear: both;
    float: left;*/
    vertical-align: bottom;
    margin: 10px;
    display: inline-block;
}

.menuPanel {

    margin: 10px;
    display: inline-block;
}



.frame10x15 {
    
    border-style: solid;
    border-width: 5px;
    height: 72px;
    width: 52px;
    margin: 5px;
    cursor: move;
    background: white;
    box-sizing: border-box;
    --padding: 6px;
    display: inline-block;
}

.frame13x18 {
    border-style: solid;
    border-width: 5px;
    height: 84px;
    width: 64px;
    margin:5px;
    cursor: move;
    background: white;
    box-sizing: border-box;
    display: inline-block;
    --padding: 8px;
}

.frame15x21 {
    border-style: solid;
    border-width: 5px;
    height: 96px;
    width: 72px;
    /*float:left;*/
    margin: 5px;
    cursor: move;
    background: white;
    box-sizing: border-box;
    display: inline-block;
    --padding: 12px;
}


.frame18x24 {
    border-style: solid;
    border-width: 5px;
    height: 108px;
    width: 84px;
    /*float:left;*/
    margin: 5px;
    cursor: move;
    background: white;
    box-sizing: border-box;
    display: inline-block;
    --padding: 12px;
}

.frame21x30 {
    border-style: solid;
    border-width: 5px;
    background: white;
    height: 132px;
    width: 96px;
    /*float:left;*/
    margin: 5px;
    cursor: move;
    box-sizing: border-box;
    display: inline-block;
    --padding: 15px;
}



.frame30x40 {
    border-style: solid;
    border-width: 5px;
    height: 172px;
    width: 132px;
    /*float:left;*/
    margin: 5px;
    cursor: move;
    background: white;
    box-sizing: border-box;
    display: inline-block;
    --padding: 20px;
}

.frame30x30 {
    border-style: solid;
    border-width: 5px;
    height: 132px;
    width: 132px;
    /*float:left;*/
    margin: 5px;
    cursor: move;
    background: white;
    box-sizing: border-box;
    display: inline-block;
    --padding: 20px;
}

.frame30x42 {
    border-style: solid;
    border-width: 5px;
    height: 180px; /*seems like its actuall size in cm*4 + 12px*/
    width: 131px;
    /*float:left;*/
    margin: 5px;
    cursor: move;
    background: white;
    box-sizing: border-box;
    display: inline-block;
    --padding: 20px;
}

.frame20x20 {
    border-style: solid;
    border-width: 5px;
    height: 92px; /*seems like its actuall size in cm*4 + 12px*/
    width: 92px;
    /*float:left;*/
    margin: 5px;
    cursor: move;
    background: white;
    box-sizing: border-box;
    display: inline-block;
    --padding: 12px;
}

.passe-partout {
    background-color: white;
    float: left;
    padding: var(--padding);
    background-image: linear-gradient(to bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%), linear-gradient(to bottom, rgb(251, 255, 229) 0%, rgb(247, 252, 219) 100%);
    background-clip: content-box, padding-box;
}



.designerFrameActive {
    margin: 0px;
    -webkit-box-shadow: inset 1px 1px 4px 0px rgba(99,99,99,1);
    -moz-box-shadow: inset 1px 1px 4px 0px rgba(99,99,99,1);
    box-shadow: inset 1px 1px 4px 0px rgba(99,99,99,1);
}


.frameBox {
    border-style: dotted;
    border-color: grey;
    border-width:2px;
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
}

.frameBoxMessure {
    color: black;
    width: auto;
    height: 30px;
    position: absolute;
    text-align: center;
}



.contextMenu {
    /*background: linear-gradient(#4ca1af, #c4e0e5);*/
    width: auto;
    height: auto;
    position: absolute;
    display: none;
    border-radius: 10px;
    border-width:5px;
    cursor: default;
    z-index: 1001;
    color: white;
    text-align: center;
    //wyciaga element powyzej reszty color: white;
}


.center {
    width: 600px;
    margin: 0 auto;
}

.clear {
    clear: both;
}

.bottom > * {
    vertical-align: bottom;
}

.frameSize {
    text-align: center;
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge (legacy) */
}
.frameContainer {
    display: inline-block;
}

.middle > * {
    vertical-align: middle;
}

.cartContainer {
    clear: both;
    float: left;
    margin-top: 10px;
    width: 100%;
    display: inline-block;
}

.collapsable {
    clear: both;
    float:left;
    margin-top: 10px;
    width: 100%;
    display: inline-block;
}
.row {
    display: flex;
    flex-wrap: wrap;
}
.row > div[class*='col-'] {
    display: flex;
}

.buttonsList button {
    width: 190px;
    color: ghostwhite; /* White text     cursor: pointer; /* Pointer/hand icon */
    display: block; /* Make the buttons appear below each other */
    margin: 5px;
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge (legacy) */
}


.noTextSelection {
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge (legacy) */
}