.loader-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display:flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;

}



.dropzone {
    border: 2px dashed #0087F7;
    border-radius: 5px;
    background: white;
    max-height: 150px;
    box-sizing: border-box;
}

.dropzone .dz-message {
    text-align: center;
    margin: 2em 0;
    font-weight: 400;
    cursor: pointer;
}

.dropzone .dz-message .dz-button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}


.cbp-vimenu {
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    height: 100%;
    list-style-type: none;
    margin: 0;
    padding-left: 10px;
    width: 60px;
    border-right: 1px solid grey;
    /*background: #f7f7f7;*/
}


.cbp-vimenu li a:hover,
.cbp-vimenu li:first-child a {
    background: #47a3da;
    color: #fff;
}

/* class for current item */
.cbp-vimenu li.cbp-vicurrent a {
    background: #fff;
    color: #47a3da;
}

.sidemenu {
    /*position: fixed;*/
    /*overflow: auto;*/
    /*top: 0;*/
    /*left: 0;*/
    /*height: 100%;*/
    list-style-type: none;
    margin: 0;
    padding-left: 10px;

    border-right: 1px solid grey;
    /*background: #f7f7f7;*/
}


/* Example for media query (depends on total height of menu) */
/*@media screen and (max-height: 34.9375em) {*/

/*    .cbp-vimenu {*/
/*        font-size: 70%;*/
/*    }*/

/*}*/

/*     Shapes*/
.board_shape {
    cursor: pointer;
}

/* feedback for dragging*/
.is-dragging {
    visibility: initial;
    opacity: 0.5;
}

/*Experimental radio buttons for selecting elements*/
/* HIDE RADIO */
[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* IMAGE STYLES */
[type=radio] + div {
    cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
    box-shadow: 0 0 0 2px gray;
    background-color: #ffe6ea;
    opacity: 1;
}


.clipart_fav_btn {
    display: block;
    z-index :5; position: absolute;  top: 0;
}

.clipart_add_btn {
    display: block;
    z-index :5; position: absolute;  bottom: 0; left: 0;
}
/*Tiles*/
.tiles {
    counter-reset: cool -1 good -1;
    padding: 12px 0;
}

.tiles > div {
    margin: 0;
    padding: 2px;
}

.tiles > .col-xs-2 {
    width: 33%;

}



.tiles > .col-xs-4 {
    width: 33%;
}


.tiles > div > div {
    position: relative;
    /*border: 1px solid red;*/
}


.tiles label {
    display: block;
    height: 100%;
    width: 100%;
    cursor: grab;
    /*opacity: 0.8;*/
    /*background-color: #f0f0f0;*/
    /*border: 1px solid blue;*/
}

.tiles img {
    display: block;
    /*height:200px;*/
    max-height: 100%;
    max-width: 100%;
    cursor: grab;
    /*opacity: 0.8;*/
    background-color: #f0f0f0;
}


.tiles img.is-loading {
    height: 100px;
    width: 150px;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #f0f0f0;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBkPSJNNjQgOS43NUE1NC4yNSA1NC4yNSAwIDAgMCA5Ljc1IDY0SDBhNjQgNjQgMCAwIDEgMTI4IDBoLTkuNzVBNTQuMjUgNTQuMjUgMCAwIDAgNjQgOS43NXoiIGZpbGw9IiMwMDAwMDAiIGZpbGwtb3BhY2l0eT0iMSIvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBmcm9tPSIwIDY0IDY0IiB0bz0iMzYwIDY0IDY0IiBkdXI9IjE4MDBtcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48L2c+PC9zdmc+");
}

.tiles img:hover {
    box-shadow: 0 0 0 2px gray;
    opacity: 1;
    background-color: lightgray;
}

/*Dragging styling*/

/*Styling dragging element*/
.clipart_preview_div.ui-draggable-dragging{
    border: 3px solid lime;
    width:150px;
    opacity: 0.5;
}

/*Toast animation fix*/
.fade {
    transition: opacity 0.1s linear !important;
}

/*    Board button style*/
.board_button {
    border-radius: 0;
    /*width: 4em;*/
    /*height: 4em;*/
}

.board_button svg {
    width: 2em;
    height: 2em;
}


.cornered {
    position: relative;
    display: inline-block;
    padding-right: 5em;
    border-left: 1px solid gray;
    /*padding: 1em 5em 1em 1em;*/
    overflow: hidden;


}

.cornered::after {
    content: '';
    border: 1px solid gray;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: #000;*/
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 0 100%;
    -webkit-transform: skew(45deg);
    -ms-transform: skew(45deg);
    transform: skew(45deg);
    z-index: -1;
}

.board_title {

    line-height: 100%;
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    padding-top: 0.5em;
    border-top: 2px solid black;
    border-left: 2px solid black;;
    border-top-left-radius: 5px;
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
    /*background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNDEuNDYxIiBoZWlnaHQ9IjMxLjEzNyIgdmlld0JveD0iMCAwIDkwLjM0NSA4LjIzOCI+PGcgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiPjxwYXRoIGQ9Ik0wIC4xM2g5MC4wNTMiIGZpbGw9IiNlNmU2ZTYiIHN0cm9rZS13aWR0aD0iLjI2Ii8+PHBhdGggZD0iTTAgOC4wOWg5MC4zNDUiIG9wYWNpdHk9Ii4yIiBmaWxsPSIjY2NjIiBzdHJva2Utd2lkdGg9Ii4yOTUiLz48L2c+PC9zdmc+");*/
}




.disable-hover,
.disable-hover * {
    /*pointer-events: none !important;*/
}

/*
#new_element_clipart_container {*/
/*    transform: translateZ(0);*/
/*    -webkit-transform: translateZ(0);*/
/*}
*/

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

.modal-contextcontrols .modal-header {
    padding: 5px;

}

.modal-contextcontrols .modal-header .close {
    margin: 5px;
    padding: 0px;
}

/*Maintain button style if expanded*/
button[aria-expanded="true"]{
    color: #23282c;
    background-color: #c8ced3;
    border-color: #c8ced3;
}

/*Tab for colourways button*/
#colorWaysTabButton{
    position: absolute;
    top: -62px;
    left: 145px;
    border-bottom: none;
    transform: scale(1.15)
}

#opacityTabButton{
    position: absolute;
    top: -62px;
    left: 145px;
    border-bottom: none;
    transform: scale(1.15)
}

#arrangeTabButton{
    position: absolute;
    top: -62px;
    left: 145px;
    border-bottom: none;
    transform: scale(1.15)
}

#alignTabButton{
    position: absolute;
    top: -62px;
    left: 45px;
    border-bottom: none;
    transform: scale(1.15)
}

#shapesUpdateButton{
    position: absolute;
    top: -62px;
    left: 145px;
    border-bottom: none;
    transform: scale(1.15)
}

 /*colourpicker customisations*/
.sp-dd{
    display: none;
}


/*FSIT's stuff, to debug and de-lint later*/



/* This screen end */

.select2 {
    width: 100% !important;
}

.table td {
    padding: 0px !important;
    min-width: 150px;
}

/*.chart-colorpicker {*/
/*    max-width: fit-content;*/
/*}*/

td input {
    padding: 5px 10px 5px 10px;
    width: 100%;
    background-color: #FFF;
    border: 0;
    font-size: 16px;
    color: #333;
    text-align: center;
    outline-color: #00aced;
}

th input {
    padding: 5px 10px 5px 10px;
    width: 100%;
    background-color: #FFF;
    border: 0;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    text-align: center;
    outline-color: #00aced;
}

/* Graphic Canvas Board */
body {
    background: #ffffff;
}

.canvas-board .app-container {
    margin: 0 auto;
    background: #ffffff;
}

.canvas-board {
    border: 1px solid #a6a6a6;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.25);
    min-height: 876px;
    height: 100vh;
    width: calc(100% - 62px);
    position: relative;
    z-index: 1;
    background-color: #dddddd;
}

#myCanvas, .upper-canvas {
    border: none !important;
}

.canvas-wrapper {
    /*display: flex;*/
    /* align-items: center;
    justify-content: center; */
    /*height: 100%;*/
    overflow: auto;
}

.canvas-layout {
    margin-top: 15px;
}

/*.canvas-content {*/
/*    display: flex;*/
/*}*/

.ver-scale > svg {
    fill: #ffffff;
    background-color: #000000;
    margin-top: 1px;
}

.hor-scale > svg {
    fill: #ffffff;
    background-color: #000000;
}

/*.scale-text {*/
/*    opacity: 0;*/
/*}*/

/*Ruler fixes*/
.rul_wrapper{
    top:-15px;
    left:-15px;
    width: calc(100% + 15px) !important;
}

.rul_ruler{
    z-index: inherit !important;
}

.rul_line{
    z-index: inherit !important;
}

.rul_corner{
    z-index: inherit !important;
}

.top-tools {
    display: flex;
    align-items: flex-end;
    bottom: -1px;
    position: relative;
}

.canvas-section .top-buttons {
    display: inline-flex;
    align-items: flex-end;
}

.top-buttons.top-buttons_left {
    margin-left: 80px;
}

.top-buttons.top-buttons_right {
    margin-left: 50px;
    margin-right: 20px;
    position: relative;
}

.canvas-section button {
    border: 1px solid #a6a6a6;
    background: #ffffff;
    margin: 0 4px;
    outline: none;
    transition: all 0.3s linear;
}

.canvas-section .top-buttons button svg {
    width: 100%;
    max-height: 25px;
    fill: #a6a6a6;
}

.canvas-section .left-buttons button svg {
    height: 100%;
    max-height: 25px;
    fill: #a6a6a6;
}

.canvas-section .top-buttons button {
    display: inline-flex;
    align-items: flex-start;
    position: relative;
    bottom: -10px;
}

/* .canvas-section .top-buttons button:focus, */
.canvas-section .top-buttons button:hover {
    bottom: 0;
    /* background-image:linear-gradient( to bottom,#dddddd,transparent 50%); */
}

.canvas-section .left-buttons button {
    display: inline-flex;
    align-items: flex-start;
    position: relative;
    right: -10px;
}

/* .canvas-section .left-buttons button:focus, */
.canvas-section .left-buttons button:hover {
    right: 0;
    /* background-image:linear-gradient( to right,#dddddd,transparent 50%); */
}

.canvas-section .top-buttons .btn-grp {
    margin: 0 7px;
    display: flex;
}

.canvas-section .top-buttons .btn-grp button {
    margin: 0;
}

.canvas-section .top-buttons button.main-tool {
    width: 50px;
    height: 62px;
    padding: 10px 10px 0;
    border-top-left-radius: 5px;
}

.canvas-section .left-buttons button.main-tool {
    width: 62px;
    height: 50px;
    padding: 10px;
    border-bottom-left-radius: 5px;
    margin: 1px 0;
}

.canvas-section .top-buttons button.mini-tool {
    width: 40px;
    height: 62px;
    padding: 13px 8px 8px;
    margin: 0 2px;
    clip-path: polygon(50% 0%, 100% 13%, 100% 100%, 0 100%, 0 13%);
}

.canvas-section .top-buttons button.mini-tool::before {
    content: "";
    content: "";
    width: 28px;
    height: 2px;
    background: #a6a6a6;
    position: absolute;
    top: 1px;
    left: -2px;
    transform: rotate(158deg);
}

.canvas-section .top-buttons button.mini-tool::after {
    content: "";
    content: "";
    width: 28px;
    height: 2px;
    background: #a6a6a6;
    position: absolute;
    top: 1px;
    right: -2px;
    transform: rotate(22deg);
}

.left-buttons {
    display: flex;
    flex-direction: column;
    position: relative;
    right: -1px;
    margin-top: 30px;
}

.canvas-section .left-buttons button.mini-tool {
    width: 62px;
    height: 40px;
    padding: 8px 8px 8px 13px;
    margin: 4px 0;
    clip-path: polygon(13% 0, 100% 0, 100% 100%, 13% 100%, 0 50%);
}

.canvas-section .left-buttons button.mini-tool::before {
    content: "";
    content: "";
    width: 28px;
    height: 2px;
    background: #a6a6a6;
    position: absolute;
    bottom: 12px;
    left: -12px;
    transform: rotate(68deg);
}

.canvas-section .left-buttons button.mini-tool::after {
    content: "";
    width: 28px;
    height: 2px;
    background: #a6a6a6;
    position: absolute;
    top: 11px;
    left: -12px;
    transform: rotate(112deg);
}

.board_name_input {
    padding: 12px 12px 22px;
    border: 1px solid #dddddd;
    background-color: #ffffff;
    margin: 0 20px;
    width: 100%;
    max-width: 400px;
    outline: none;
    border-radius: 5px 5px 0 0;
    position: relative;
    bottom: -10px;
    transition: all 0.3s linear;
    cursor: pointer;
    clip-path: polygon(0 0, 80% 0%, 100% 100%, 0% 100%);
    position: relative;
    min-width: 400px;
}

.board_name_input.active {
    z-index: 2;
    border-bottom: 1px solid #ffffff;
    bottom: -12px;
}

.board_name_input::before {
    content: "";
    width: 2px;
    height: 122px;
    position: absolute;
    top: -37px;
    background: #dddddd;
    right: 47px;
    transform: rotate(128deg)
}

.board_name_input h3 {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 18px;
    line-height: 1.4;
    color: #2a2a2a;
    margin-bottom: 0;
}

.board_name_input:not(.active):hover {
    bottom: 0px;
    /* background-image:linear-gradient( to bottom,#dddddd,transparent 50%); */
}

.board-section {
    display: flex;
    position: relative;
}

.seperater {
    margin: 5px;
    border: none;
}

.multiple-page {
    padding: 10px 20px;
    font-size: 30px;
    color: #a6a6a6;
    border: 1px solid #dddddd;
    border-radius: 10px;
    text-align: center;
    margin: 10px 0;
    margin-left: 62px;
}

.board_mainmenu_container {
    position: absolute;
    top: 10px;
    left: 30px;
    z-index: 1;
    /*width: 100%;*/
    /*height: 100%;*/
    display: flex;
    /* background-color: #ffffff; */
}

.board_mainmenu {
    border: 1px solid #dddddd;
    margin: 0;
    position: relative;
    border-radius: 0 5px 5px 5px;
    padding: 20px;
    box-shadow: 0px 3px 5px 0px rgb(0 0 0 / 25%);
    -webkit-box-shadow: 0px 3px 5px 0px rgb(0 0 0 / 25%);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.25);
    width: calc(100% - 80px);
    background-color: #ffffff;
}

.board_mainmenu > .row {
    height: 100%;
}

.board_mainmenu_screen {
    width: 100%;
    border: 1px solid #dddddd;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.board_mainmenu_screen h6 {
    font-size: 40px;
    color: #a6a6a6;
    max-width: 584px;
    text-align: center;
}

.board_mainmenu_tools .card {
    border: none;
}

.board_mainmenu_tools .card-header {
    padding: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #dddddd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.board_mainmenu_tools .accordion > .card > .card-header {
    margin-bottom: 0;
}

h2.metadata-form-header  {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.4;
    color: #a6a6a6;
    margin-bottom: 0;
}



.board_mainmenu_tools .card-body {
    padding: 10px 0;
}

.dimension-select-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.4;
    color: #a6a6a6;
}

.dimension-select-option-custom {
    align-items: flex-end;
}

.dimension-values p {
    margin-bottom: 0;
    padding: 0 13px;
}

p.dimension-horizontal {
    border-right: 1px solid #dddddd;
}

.gap {
    margin-bottom: 10px;
}

.dimension-select-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.4;
    color: #a6a6a6;
    padding-bottom: 3px;
    padding-top: 5px;
    border-bottom: 1px solid #dddddd;
}

.dimension-values {
    display: inline-flex;
}

.dimension-select {
    display: block;
    position: relative;
    padding-left: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: 0;
}

.dimension-select input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 0;
    height: 8px;
    width: 8px;
    background-color: transparent;
    border-radius: 50%;
    border: 1px solid #a6a6a6;
    background-color: #ffffff;
}

.dimension-select input:checked ~ .checkmark, .dimension-select:hover input ~ .checkmark {
    /* background-image:linear-gradient( to bottom,#dddddd,transparent 50%); */
    background: #000000;
}

.dimension-values > div {
    display: inline-flex;
    flex-direction: column;
    position: relative;
}

.dimension-values > div.dimension-vertical input, .dimension-values > div.dimension-vertical label {
    margin-left: 10px;
}

.dimension-values .dimension-horizontal label {
    margin: 0 10px;
}

.dimension-values .dimension-horizontal input {
    border-right: 1px solid #dddddd;
    margin: 0 10px;
    position: relative;
}

.dimension-values div.dimension-horizontal::after {
    content: "";
    width: 1px;
    height: 20px;
    position: absolute;
    right: 0px;
    bottom: 0;
    background: #dddddd;
}

.dimension-values label {
    font-size: 10px;
    margin-bottom: 0;
}

/*Metadata custom dimensions input*/
.dimension-values input {
    width: 50px;
    outline: none;
    border: 1px solid #dddddd;
    color: #a6a6a6;
    height: 18px;
    border-radius: 3px 3px 0 3px;
}

/*Metadata description input*/
textarea.description_box {
    width: 100%;
    border: 1px solid #dddddd;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.4;
    color: #a6a6a6;
    resize: none;
    outline: none;
    padding: 5px;
    height: 100px;
    border-radius: 3px 3px 0 3px;
    margin-bottom: 5px;
}

/*Metadata name input*/
input.name_box {
    width: 100%;
    border: 1px solid #dddddd;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 12px;
    color: #a6a6a6;
    resize: none;
    outline: none;
    padding: 5px;
    border-radius: 3px 3px 0 3px;
    margin-bottom: 5px;
}

.search_box {
    display: flex;
    align-items: flex-end;
    padding-bottom: 3px;
    /*border-bottom: 1px solid #dddddd;*/
    margin-bottom: 7px;
}

.search-icon {
    width: 10px;
    min-width: 10px;
    margin-right: 3px;
}

.search-icon svg {
    fill: #a6a6a6;
}

/*.search_box input[type="text"] {*/
/*    font-family: "Montserrat", sans-serif;*/
/*    font-weight: normal;*/
/*    font-size: 12px;*/
/*    line-height: 1.4;*/
/*    color: #a6a6a6;*/
/*    outline: none;*/
/*    border-bottom-left-radius: 4px;*/
/*    border-bottom-right-radius: 4px;*/
/*    border-top-right-radius: 4px;*/
/*    border-top-left-radius: 0px;*/
/*    border: 1px solid #a6a6a6;*/
/*}*/

button.clear-all-btn {
    background: #dddddd;
    padding: 2px 5px;
    color: #2a2a2a;
    border-radius: 0 3px 3px 3px;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 11px;
    line-height: 1.4;
    margin-left: auto;
    border-color: #dddddd;
    min-width: 73px;
    display: inline-flex;
    align-items: center;
}

button.clear-all-btn svg {
    width: 11px;
    fill: #2a2a2a;
    margin-right: 4px;
}

button.search-option-btn {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.4;
    color: #a6a6a6;
    border: 1px solid #dddddd;
    border-radius: 0 3px 3px 3px;
    margin-bottom: 5px;
}

.card-header svg {
    width: 18px;
}

.card-header.collapsed svg {
    transform: rotate(180deg);
    width: 18px;
}

.board-tool-section {
    position: absolute;
    width: 300px;
    border: 1px solid #a6a6a6;
    padding: 10px;
    margin: 5px;
    height: 98%;
    border-radius: 0 5px 5px 5px;
    background-color: #ffffff;
    top: -3px;
}

.board-tool-section .board-tool-btn {
    width: 62px;
    height: 50px;
    padding: 10px;
    border-bottom-left-radius: 5px;
    margin: 4px 0;
    display: inline-flex;
    align-items: flex-start;
    position: absolute;
    top: 330px;
    left: -75px;
    border-right: 1px solid #ffffff;
    transform: scale(1.13);
}

.board-tool-section.search-tool-section .board-tool-btn {
    /*top: auto;*/
    top: 550px;
    /*bottom: 164px;*/
}

.board-tool-section.image-tool-section .board-tool-btn {
    top: 117px;
}

.board-tool-section.shapes-tool-section .board-tool-btn {
    top: 120px;
}

.board-tool-section.picture-tool-section .board-tool-btn {
    top: 222px;
}

.board-tool-section .board-tool-btn svg {
    height: 100%;
    max-height: 25px;
    fill: #a6a6a6;
}

.search_box_big{
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    border-top-left-radius: 0px;
    border: 1px solid #a6a6a6;
}

.search_box_big .search-icon {
    width: 13px;
    min-width: 13px;

}

.search_box_big.search_box input[type="text"] {
    font-size: 16px;

}

ul.graphic-images {
    padding: 0;
    border: 1px solid #dddddd;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    /* align-items: center;
    justify-content: center; */
    list-style: none;
    height: 100%;
    overflow: auto;
}

ul.graphic-images li {
    width: 33.33%;
    height: 92px;
    padding: 5px;
}

ul.graphic-images li img {
    width: 100%;
    height: 100%;
    border: 1px solid #dddddd;
}

.board-tool-section .request-btn {
    display: block;
    margin: auto auto 10px;
}

.board-tool-section .request-btn:hover {
    background-image: linear-gradient(to bottom, #dddddd, transparent 50%);
}

ul.graphic-images.shapes-lists {
    border: none;
}

ul.graphic-images.shapes-lists li img {
    border-radius: 5px;
}

.board-tool-section .customize_background_preview {
    border: 1px solid #dddddd;
    width: 100%;
    max-width: none;
    height: 150px;
    margin-bottom: 10px;
}

.board-tool-section .customize_background_preview .profile_overlay svg {
    fill: #dddddd;
    width: 80px;
}

ul.graphic-images.full-height-section {
    margin-bottom: 0;
    align-content: flex-start;
    flex-grow: 1;
}

.board-tool-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.scale-options {
    display: flex;
    margin-bottom: 3px;
    margin-left: auto;
    margin-right: 6px;
}

button.scale-option-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 10px;
    color: #a6a6a6;
    border: 1px solid #dddddd;
    background: #ffffff;
}

.structure-options {
    margin-top: 30px;
    display: flex;
    align-items: center;
}

button.structure-btn {
    width: 60px;
    height: 60px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button.structure-btn label {
    cursor: pointer;
}

button.scale-option-btn:hover, button.structure-btn:hover {
    background-image: linear-gradient(to bottom, #dddddd, transparent 50%);
}

button.structure-btn svg {
    fill: #dddddd;
    height: 25px;
    width: 45px;
}

button.structure-btn.active {
    /* background-image: linear-gradient( to bottom,#dddddd,transparent 50%); */
    border: 2px solid #2a2a2a;
}

button.structure-btn_hor svg {
    height: 45px;
    width: 25px;
}

.css-treeview {
    max-height: 300px;
    overflow: auto;
}

.css-treeview label {
    background: #2C3E50 !important;
    padding: 5px;
    border-radius: 3px;
    margin: 2px;
}

.css-treeview a {
    background: #8E44AD;
    padding: 5px;
    border-radius: 3px;
    margin: 2px;
}

.css-treeview ul,
.css-treeview li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.css-treeview input {
    position: absolute;
    opacity: 0;
}


.css-treeview input:checked + label {
    font-weight: bold;
}

.css-treeview {
    font: normal 11px "Segoe UI", Arial, Sans-serif;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.css-treeview a {
    color: #00f;
    text-decoration: none;
}

.css-treeview a:hover {
    text-decoration: underline;
}

.css-treeview input + label + ul {
    margin: 0 0 0 22px;
}

.css-treeview input + label + ul {
    display: none;
}

.css-treeview label,
.css-treeview label::before {
    cursor: pointer;
}

.css-treeview input:disabled + label {
    cursor: default;
    opacity: .6;
}

.css-treeview input:checked:not(:disabled) + label + ul {
    display: block;
}

.css-treeview label,
.css-treeview label::before {
    background: url("icons.png") no-repeat;
}

.css-treeview label,
.css-treeview a,
.css-treeview label::before {
    display: inline-block;
    height: 16px;
    line-height: 16px;,
vertical-align: middle;
}

.css-treeview label {
    background-position: 18px 0;
}

.css-treeview label::before {
    content: "";
    width: 16px;
    margin: 0 22px 0 0;
    vertical-align: middle;
    background-position: 0 -32px;
}

.css-treeview input:checked + label::before {
    background-position: 0 -16px;
}

/* webkit adjacent element selector bugfix */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .css-treeview {
        -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
    }

    @-webkit-keyframes webkit-adjacent-element-selector-bugfix {
        from {
            padding: 0;
        }
        to {
            padding: 0;
        }
    }
}

li.list-folder > label, li.list-folder > a {
    background: transparent !important;
    height: auto;
    display: flex;
    align-items: center;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.4;
    color: #a6a6a6;
    padding: 0;
    margin-bottom: 3px;
    border-bottom: 1px solid #dddddd;
    padding: 3px 0;
}

.card-body .css-treeview label::before {
    width: 0;
    margin: 0 0px 0 0;
}

li.list-folder > label svg, li.list-folder > a svg {
    width: 15px;
    fill: #a6a6a6;
    margin-right: 5px;
}

/*#select2-new_element_clipart_tags-container {*/
/*    display: none !important;*/
/*}*/

.customize_background_preview .dropzone {
    border: none;
    min-height: 0 !important;
    padding: 0px 0px;
}

.board-top-tool-section {
    position: absolute;
    top: 69px;
    right: auto;
    z-index: 9;
}

.board-tool-layer {
    position: relative;
    /*border: 1px solid #a6a6a6;*/
    /*border-radius: 5px;*/
    background: #ffffff;
    /*padding: 7px*/
}

.board-tool-layer button.main-tool {
    width: 50px;
    height: 62px;
    padding: 10px 10px 0;
    border-top-left-radius: 5px;
    display: inline-flex;
    align-items: flex-start;
    position: absolute;
    top: -66px;
    left: 54px;
    border-bottom: 1px solid #ffffff;
    transform: scale(1.15);
}

.board-tool-layer svg {
    width: 100%;
    max-height: 25px;
    fill: #a6a6a6;
}

.board-top-tools {
    display: flex;
    align-items: center;
    justify-content: center;;
}

.board-top-tool {
    width: 65px;
    height: 65px;
    border: 1px solid #a6a6a6;
    margin: 0 2px;
    border-radius: 5px;
}

.board-top-tool img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.board-top-tool-section.board-top-save-group {
    right: 5px;
}

h6.save-heading {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.4;
    color: #a6a6a6;
    margin-bottom: 5px;
}


h5.save-heading {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 18px;
    line-height: 1.4;
    color: #a6a6a6;
}

/*.board-tool-layer-wrapper {*/
/*    display: flex;*/
/*}*/

.board-tool-layer-left {
    width: 180px;
    height: 180px;
    border: 1px solid #dddddd;
    margin-right: 7px;
}

.board-tool-layer-left img {
    width: 100%;
    height: 100%;
}

.board-tool-layer-right {
    max-width: 270px;
}

input.input-box {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.4;
    color: #a6a6a6;
    outline: none;
    border: 1px solid #dddddd;
    border-radius: 5px;
    width: 100%;
    margin-bottom: 15px;
}

input.input-box::placeholder {
    color: #dddddd;
}


span.description_box_label {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.4;
    color: #a6a6a6;
}

.board-tool-layer-right textarea.description_box {
    height: 54px;
}

/*.board-top-tool-section.board-top-tool-shape {*/
/*    right: 127px;*/
/*}*/

.removed-alignment .board-top-tool-section.board-top-tool-shape {
    left: 112px;
}

.board-top-tool-section.board-top-tool-shape button.main-tool {
    left: 4px;
}

.board-tool-shape-options {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 193px;
    margin: 0 -2px -4px;
}

.board-top-tool-border .board-tool-shape-options {
    width: 100%;
    margin-bottom: 10px;
}

.board-tool-shape-options .board-tool-shape {
    width: 40px;
    height: 40px;
}

.board-tool-shape-options input.range-slider_range {
    width: 229px;
}

.board-tool-shape {
    width: 35px;
    height: 35px;
    border: 1px solid #dddddd;
    border-radius: 3px;
    margin: 0 2px 4px;
    display: inline-flex;
    align-items: center;
}

.board-tool-layer svg {
    width: 100%;
    max-height: 25px;
    fill: #a6a6a6;
}

.shape-seperater {
    margin: 5px;
}

.board-top-tool-section.board-top-tool-align button.main-tool {
    left: 7px;
}

.board-top-tool-section.board-top-tool-colourways button.main-tool {
    /*left: 192px;*/

}

div#colorWaysEdit {
    left: -57px;
}

.removed-alignment div#colorWaysEdit {
    /*right: 2px;*/
}


div#groupObject {
    left: -55px;
}

.board-top-tool-section.board-top-tool-align {
    /*right: 115px;*/
    left: 165px;
}

.board-top-tool-align .board-tool-shape-options {
    width: 148px;
}

#board-top-tool-shape {

    left: 111px;

}

.board-top-tool-align .board-tool-shape {
    width: 30px;
    height: 30px;
    padding: 5px;
}

.board-top-tool-section board-top-tool-opacity top_open_menu {
    left: 0px;
}

.opacity {
    display: flex;
    align-items: center;
}

input.range-slider_range {
    -webkit-appearance: none;
    height: 13px;
    border-radius: 6px;
    background: #ffffff;
    outline: none;
    padding: 0;
    margin: 0;
    border: 1px solid #dddddd;
    width: 235px;
}

input.range-slider_range:hover, input.range-slider_range:focus {
    background-image: linear-gradient(to bottom, #dddddd, transparent 50%);
}

input.range-slider_range[type="range"]::-webkit-slider-thumb {
    width: 4px;
    -webkit-appearance: none;
    height: 19px;
    background: #ffffff;
    border: 1px solid #a6a6a6;
}

span.range-slider_vaue {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 9px;
    color: #000000;
    border: 1px solid #dddddd;
    width: 45px;
    height: 17px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}

/* .main-tool-option{
    display: none !important;
}  */
.text-tool-options {
    display: flex;
    align-items: flex-end;
}

button.text-mini-button {
    min-width: 33px;
    height: 44px;
    padding: 4px;
    width: 33px;
    border-radius: 5px 5px 0 0;
    bottom: -7px !important;
    border-color: #dddddd !important;
}

div.text-mini-button {
    min-width: 33px;
    height: 40px;
    padding: 4px;
    margin-right: 10px;
    width: 33px;
    border-radius: 5px 5px 0 0;
    bottom: -7px !important;
    border-color: #dddddd !important;
}

span.color-preview {
    width: 23px;
    height: 23px;
    background: #000000;
    border-radius: 3px;
}

select.text-fonts {
    min-width: 120px;
    width: 120px;
    height: 37px;
    position: relative;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 15px;
    color: #a6a6a6;
    border: 1px solid #dddddd;
    border-radius: 5px 5px 0 0;
    text-align: center;
    outline: none !important;
}

.font-style-options {
    display: flex;
    padding: 5px 3px 5px;
    border: 1px solid #dddddd;
    border-radius: 3px 3px 0 0;
    background: #ffffff;
}

button.font-style-btn {
    padding: 4px;
    border-radius: 3px;
    bottom: 0 !important;
    border: 1px solid #dddddd !important;
    height: 25px;
    width: 25px;
}

button.font-style-btn.active, button.font-style-btn:hover {
    background-image: linear-gradient(to bottom, #dddddd, transparent 50%);
}

#page-content-wrapper {
    display: none !important;
}

button.font-style-btn label {
    line-height: 0;
}

#N4ndRNF-1615829474740 {
    right: auto !important;
    left: 10px !important;
}

#selected_content_popover {
    display: none !important;
}

.graphic-tool-section-content {
    display: flex;
    flex-direction: column;
    height: inherit;
    width: 300px;
}

.graphic-tool-section-content > button.main-tool.board-tool-btn {
    left: -64px;
}

/*Side containers*/
/*.side-container{*/
/*    top:-20px !important;*/

/*}*/

/*button on clipart dropdown (dropright)*/
#cliparts_dropdown_btn{
    position: absolute;
    left: -63px;
    top: 20px;
    border-right: none;
    transform: scale(1.13);
}

#clipart_dropdown_menu{
    top:-28px !important;
}

.dashboard_nav_btn {
    z-index: 10;
}

/*Chart styling*/

#charts_dropdown_menu{
    top:-70px !important;
}

/*#charts_dropdown_btn{*/
/*    position: absolute;*/
/*    top: 68px;*/
/*    left: -60px;*/
/*    border-right: none;*/
/*}*/

#charts_panel_close_btn{
    top: 64px;
}

.chart-tool-section{
    /*height: 80vh;*/
}

ul.chart-options {
    display: flex;
    align-items: center;

    list-style: none;
    padding: 0;
}

ul.chart-options li {
    width: 60px;
    height: 60px;
    border: 1px solid #dddddd;
    border-radius: 3px;
    padding: 8px;
    background: #ffffff;
    margin-left: 2px;
}

ul.chart-options li:hover, ul.chart-options li:focus {
    background-image: linear-gradient(to bottom, #dddddd, transparent 50%);
}

ul.chart-options li img {
    width: 100%;
    height: 100%;
}

.chart-section {
    border: 1px solid #dddddd;
    padding: 5px;
}

.chart-section-top {
    margin-bottom: 15px;
}

.chart-heading {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.4;
    color: #a6a6a6;
    margin-bottom: 9px;
    border-bottom: 1px solid #dddddd;
    padding-bottom: 3px;
}

input.chart-input {
    width: 100%;
    border: 1px solid #dddddd;
    border-radius: 5px;
    margin-bottom: 7px;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.2;
    color: #a6a6a6;
    border-bottom: 1px solid #dddddd;
    padding: 3px;
}

input.chart-input::placeholder {
    color: #dddddd;
}

.grid-action-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 3px;
    border-bottom: 1px solid #dddddd;
    margin-bottom: 10px;
}

.chart-heading.chart-heading-mini {
    border: none;
    font-size: 14px;
    margin-bottom: 0;
    padding: 0;
}

.grid-show {
    display: block;
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 13px;
    line-height: 1.2;
    color: #a6a6a6;
}

.grid-show input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.grid-checkmark {
    position: absolute;
    top: 1px;
    left: 0;
    height: 13px;
    width: 13px;
    background-color: #ffffff;
    border: 1px solid #a6a6a6;
}

.grid-show:hover input ~ .grid-checkmark, .grid-show input:checked ~ .grid-checkmark {
    background-image: linear-gradient(to bottom, #dddddd, transparent 50%);
}

.grid-show input:checked ~ .grid-checkmark {
    background: #000000;
}

.chart-insert-btn.file-download-btn:hover {
    background-image: linear-gradient(to bottom, #dddddd, transparent 50%);
}

.chart-preview-image {
    border: 1px solid #dddddd;
    border-radius: 5px;
    padding: 10px;
    margin: 0 5px 10px;
    max-width: 222px;
}

/*.chart-section.chart-section-bottom.expand .chart-preview-image {*/
/*    margin: 0 auto 10px;*/
/*}*/

.chart-preview-image img {
    width: 100%;
    max-height: 100%;
}

button.chart-insert-btn {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 1.4;
    color: #a6a6a6;
    padding: 5px 29px;
    border-radius: 3px 3px 0 3px;
    display: block;
    margin: 0 auto 20px;
}

.chart-section.chart-section-bottom {
    display: flex;
    flex-direction: column;
    /*height: 100%;*/
    position: relative;
    background: #ffffff;
}

.chart-section-bottom_section {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    max-height: 525px;
}

.chart-tool-section .board-tool-btn {
    top: 71px;
}

.request-graphics {
    position: absolute;
    width: 450px;
    background: #ffffff;
    right: -600px;
    border: 1px solid #a6a6a6;
    border-radius: 5px;
    padding: 5px;
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
}

.request-graphics_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.request-graphics_header {
    margin-bottom: 10px;
}

h3.request-graphics_heading {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.4;
    color: #a6a6a6;
    margin-bottom: 0;
}

.request-graphics .request-graphics_close {
    border: none;
    outline: none;
    width: 20px;
    padding: 0;
}

.request-graphics_close svg {
    fill: #a6a6a6;
}

.request-graphics_body {
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

h5.request-graphics_label {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    color: #a6a6a6;
    margin-bottom: 5px;
}

input.request-graphics_input {
    width: 100%;
    border: 1px solid #dddddd;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.2;
    color: #a6a6a6;
    margin-bottom: 5px;
    border-radius: 3px;
}

textarea.request-graphics_textarea {
    width: 100%;
    border: 1px solid #dddddd;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.2;
    color: #a6a6a6;
    margin-bottom: 5px;
    border-radius: 3px;
    resize: none;
    height: 90px;
}

input.request-graphics_input::placeholder, textarea.request-graphics_textarea::placeholder {
    color: #dddddd;
}

.request-graphics_label {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.request-graphics_label .search_box {
    max-width: 130px;
    margin-right: 10px;
}

.request-graphics_label .search_box_big .search-icon {
    width: 10px;
    min-width: 10px;
}

.search-icon-blue svg{
    fill: #5897FB;
}

.select2-selection--multiple:before {
    content: "";
    position: absolute;
    right: 7px;
    top: 42%;
    border-top: 5px solid #888;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.request-graphics_label .search_box_big.search_box input[type="text"] {
    font-size: 13px;
}

.request-graphics_image {
    width: 70px;
    height: 70px;
    padding: 10px;
    border: 1px solid #dddddd;
    border-radius: 5px;
}

.request-graphics_image svg {
    fill: #dddddd;
}

button.request-send-btn {
    padding: 1px 40px;
    background: #dddddd;
    color: #ffffff;
    border-radius: 3px 3px 0 3px;
    display: block;
    margin: auto auto 10px;
    border: 1px solid #dddddd;
    outline: none;
}

button.dashboard_nav_btn_board {
    left: -67px;
    transition: all 0.3s linear;
}

button.dashboard_nav_btn_board:hover {
    left: 0;
}

button.dashboard_nav_btn_board i {
    margin-right: 0;
    margin-left: 10px;
}

.request-url-container {
    margin: 30px 0;
}

input.request_url {
    width: 100%;
    border: 1px solid #dddddd;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.2;
    color: #2a2a2a;
    margin-bottom: 5px;
    border-radius: 3px;
}

input.request_url::placeholder {
    color: #a6a6a6;
}

.request-url-section {
    display: flex;
    align-items: center;
}

button.request-url-btn {
    width: 12px;
    padding: 0;
    outline: none;
    border: none;
    margin-right: 5px;
}

button.request-url-btn svg {
    fill: #dddddd;
}

.request-url-section input.request_url {
    margin-bottom: 0;
}

div.share-tool-section {
    height: 555px !important;
    /*bottom: 0;*/
    /*top: auto;*/
    width: 330px;
}

div.download-tool-section {
    height: auto;
    bottom: 370px;
    top: auto;
    width: 675px;
    min-height: 400px;
}

.share-tool-section .board-tool-btn {
    top: 480px;
    /* bottom: 161px; */
}

ul.share-board-options {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    list-style: none;
}

ul.share-board-options li {
    width: 40px;
    height: 40px;
}

ul.share-board-options li img {
    width: 100%;
    height: 100%;
    border-radius: 3px;
}

.share-board-email {
    border: 1px solid #dddddd;
    border-radius: 5px;
    margin-bottom: 7px;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.2;
    color: #a6a6a6;
    border-bottom: 1px solid #dddddd;
    padding: 3px;
    width: 100%;
    text-align: center;
}

h6.share-text {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.4;
    color: #a6a6a6;
    margin-bottom: 9px;
    /* border-bottom: 1px solid #dddddd; */
    padding-bottom: 3px;
}

.share-preview {
    border: 1px solid #dddddd;
    width: 100%;
    height: 300px;
    width: 300px;
    margin: 0 auto 10px;
    border-radius: 0 5px 5px 5px;
}

.share-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*#select2-board_tags-container {*/
/*    display: none !important;*/
/*}*/

/*.download-section {*/
/*    display: flex;*/
/*}*/

.download-image-preview {
    min-width: 350px;
    width: 350px;
    /* min-height: 300px; */
    height: 300px;
    border: 1px solid #dddddd;
    background-color: lightgrey;
    border-radius: 0 3px 3px 3px;
    margin-right: 10px;
}

.download-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    /*border: 1px solid #dddddd;*/
    /*border-radius: 0 3px 3px 3px;*/
}

.download-image-detail {
    width: 100%;
}

.file-option-header {
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: space-between;*/
    /*padding-bottom: 3px;*/
    border-bottom: 1px solid #dddddd;
    /*width: 100%;*/
    margin-bottom: 5px;
}

h5.file-option-heading {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 1.2;
    color: #a6a6a6;
    margin-bottom: 0;
    /* border-bottom: 1px solid #dddddd; */
    /* padding-bottom: 3px; */
}

button.file-option-clear {
    border: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.2;
    color: #a6a6a6;
    padding: 0;
    margin: 0;
}

button.file-option-clear svg {
    width: 12px;
    margin-right: 2px;
    fill: #a6a6a6;
}

.file-detail-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 6px;
}

h5.file-detail_heading {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    color: #a6a6a6;
    margin: 0;
}

.checkbox-label {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    color: #a6a6a6;
}

.file-details {
    display: flex;
    margin-bottom: 10px;
}

img.file-detail-image {
    width: 50px;
    min-width: 50px;
    height: 50px;
    border: 1px solid #dddddd;
    margin-right: 10px;
}

.file-details-type-wrapper {
    display: flex;
}

.file-details-type-wrapper .grid-checkmark {
    position: absolute;
    top: 3px;
    left: 0;
    height: 10px;
    width: 10px;
    background-color: #ffffff;
    border: 1px solid #a6a6a6;
}

.file-details-type {
    width: 100%;
}

.file-details-type-wrapper {
    display: flex;
    justify-content: space-between;
}

.file-details-type-wrapper .grid-show {
    margin-bottom: 1px;
    font-size: 10px;
    padding-left: 15px;
    line-height: normal;
    display: inline-flex;
    align-items: center;
    min-height: 16px;
}

select.file-details-select {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 11px;
    line-height: 1.2;
    color: #a6a6a6;
    border: none;
    border-bottom: 1px solid #dddddd;
    outline: none;
}

.chart-insert-btn.file-download-btn {
    margin: 15px 0 0 auto;
}

#chartartsPannel{
    width: initial !important;
    height: initial !important;
    min-height: 150px;
}

/*#select2-board_tags-container {*/
/*    display: none !important;*/
/*}*/

.cls-1 {
    fill: #fff;
}

.cls-2, .cls-3 {
    fill: none;
    stroke: #a6a6a6;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 3px;
}

.cls-3 {
    stroke-dasharray: 0 6.2435;
}

.board-tool-shape.colorpicker-element span.input-group-text.colorpicker-input-addon {
    background: transparent;
    border: none;
    padding: 0;
}

.board-tool-shape.colorpicker-element .colorpicker-input-addon i {
    height: 40px;
    width: 40px;
}

#update_shape_border_colour_div .sp-preview-inner::after {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: #ffffff;
}

.bigcolour .sp-replacer {
    width: 35px;
    height: 35px;
    border: 1px solid #dddddd;
    border-radius: 3px;
    margin: 0 2px 4px;
}

.smallcolour .sp-replacer {
    width: 15px;
    height: 15px;
    border: 1px solid #dddddd;
    border-radius: 3px;
}
/*div#board-top-tool-opacity {*/
/*    right: 134px;*/
/*}*/

.removed-alignment div#board-top-tool-opacity {
    left: 2px;
}

div#editShapeOprions {
    left: -55px;
}

.image_context_menu {
    position: relative;
}

.canvas-section {
    /*padding: 30px 0;*/
    min-width: 1210px;
}

table#chart_data_table input {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    font-size: 13px;
    line-height: 1.2;
    color: #000000;
    border: 0;
    outline: 0;
}

/*span.input-group-text.colorpicker-input-addon {*/
/*    background: transparent;*/
/*    border: none;*/
/*    padding: 0;*/
/*}*/

.no-gutters.chart-color-shell i, .row.no-gutters.chart-color-shell .label-cell i {
    color: #a6a6a6;
    border: 1px solid #a6a6a6;
    padding: 1px 2px 0px 2px;
}

.row.no-gutters.chart-color-shell {
    display: flex;
    align-items: center;
    padding: 0px 4px;
}

.chart-label-cell {
    padding-bottom: 0;
}

label.color-by {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

input#colorBy {
    width: 0;
}

span.color-arrow {
    width: 16px;
    margin-left: auto;
    transform: rotate(180deg);
    margin-bottom: 0;
}

span.color-arrow.open {
    transform: rotate(90deg);
}

.color-by-cell {
    vertical-align: middle !important;
}

#chart_data_table {
    background: #ffffff;
    margin-bottom: 0
}

.chart-table-container {
    position: relative;
    padding: 0 30px 30px 0;
    /* overflow: hidden; */
    /* white-space: nowrap; */
    width: fit-content;
}

.add-cell-btn {
    width: 20px;
    padding: 0;
    position: absolute;
    background: transparent !important;
    border: none !important;
}

.add-cell-btn svg {
    fill: #a6a6a6;
}

.remove-cell-btn {
    width: 20px;
    padding: 0;
    position: absolute;
    background: transparent !important;
    border: none !important;
}

.remove-cell-btn svg {
    fill: #a6a6a6;
}

button.add-cell-btn.add-cell-btn_coloumn {
    top: 4px;
    right: 0px;
}

button.remove-cell-btn.remove-cell-btn_coloumn {
    top: 28px;
    right: 0px;
}

button.add-cell-btn.add-cell-btn_row {
    left: 0px;
    bottom: 3px;
}

button.remove-cell-btn.remove-cell-btn_row {
    left: 25px;
    bottom: 3px;
}

/*Colour pickers*/
/*.colorpicker-input-addon i{*/
/*    height: 32px !important;*/
/*    width: 32px !important;*/
/*}*/

/*.chart-table-container::after {*/
/*    content: "";*/
/*    height: 100%;*/
/*    position: absolute;*/
/*    z-index: 2;*/
/*    top: 0;*/
/*    left: 266px;*/
/*    box-shadow: 0px 4px 10px 10px #ffffff;*/
/*}*/

/*.chart-section.chart-section-bottom.expand .chart-table-container::after {*/
/*    display: none;*/
/*}*/

/*.chart-section.chart-section-bottom.expand {*/
/*    width: 800px;*/
/*}*/

/*.chart-section.chart-section-bottom.expand .chart-section-bottom_section {*/
/*    overflow: auto;*/
/*}*/

/*button.chart-expand {*/
/*    position: absolute;*/
/*    width: 60px;*/
/*    height: 84px;*/
/*    border: none;*/
/*    outline: none;*/
/*    top: 50%;*/
/*    right: -58px;*/
/*    background: transparent;*/
/*}*/

/*span.select2-selection.select2-selection--single {*/
/*    border: 1px solid #dddddd;*/
/*    border-radius: 3px 3px 0 0;*/
/*    padding: 2px 0 32px;*/
/*    outline: none;*/
/*    min-width: 110px;*/
/*}*/

.coming-soon-text {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 29px;
    line-height: 1.2;
    color: #dddddd;
}

.left-tool-close {
    position: absolute;
    opacity: 0;
    transition: all 0.3s linear;
}

.left-tool-button {
    transition: all 0.3s linear;
}

.main-tool.board-tool-btn:hover .left-tool-close {
    opacity: 1;
}

.main-tool.board-tool-btn:hover .left-tool-button {
    opacity: 0;
}

.left-buttons button.main-tool[aria-expanded="true"]{
    opacity: 0
}

.shape-button.active{
    background-color: lightgrey;
}

.polygon_preview_div{
    width: 33.33%;
    padding: 1px;
    border: 1px solid #a6a6a6;
}

.polygon_preview_div:hover{
    background-color: #f6f6f6;

}

@media (max-width: 1360px) {
    .top-buttons.top-buttons_right {
        margin-left: auto;
    }

    .board_name_input {
        min-width: 300px;
        width: 300px;
    }

    .board_name_input::before {
        right: 34px;
        transform: rotate(136deg);
    }
}