@font-face {
    font-family: 'Open Sans';
    src: url('/Areas/NewBmc/app/fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/Areas/NewBmc/app/fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/Areas/NewBmc/app/fonts/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/Areas/NewBmc/app/fonts/OpenSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/Areas/NewBmc/app/fonts/OpenSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/Areas/NewBmc/app/fonts/OpenSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/Areas/NewBmc/app/fonts/OpenSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/Areas/NewBmc/app/fonts/OpenSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}


/*----- Lato font -----*/

@font-face {
    font-family: 'Lato';
    src: url('/Areas/NewBmc/app/fonts/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('/Areas/NewBmc/app/fonts/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('/Areas/NewBmc/app/fonts/Lato-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('/Areas/NewBmc/app/fonts/Lato-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('/Areas/NewBmc/app/fonts/Lato-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('/Areas/NewBmc/app/fonts/Lato-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('/Areas/NewBmc/app/fonts/Lato-Hairline.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('/Areas/NewBmc/app/fonts/Lato-HairlineItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('/Areas/NewBmc/app/fonts/Lato-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('/Areas/NewBmc/app/fonts/Lato-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

/*----- Bootstrap overrides -----*/

html, body {
    height: 100%;
    font-family: 'Open Sans', Verdana, sans-serif;
}

* {
    font-family: 'Open Sans', Verdana, sans-serif;
}

textarea {
    resize: none;
}

.navbar-default {
    background-color: white;
    box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.09);
    border-radius: 0;
    height: 80px;
}

.title-big {
    min-height: 100px;
    font-size: 50px;
}

.navbar-brand {
    background-repeat: no-repeat;
    background-size: contain;
    width: 250px;
    background-origin: content-box;
}

.navbar-default .container-fluid,
.navbar-default .navbar-header,
.navbar-default .navbar-header .navbar-brand,
.navbar-default .navbar-brand > img {
    height: 100%;
}

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:visited {
    color: black;
    letter-spacing: 0.3px;
}
    /*,
		.navbar-default .navbar-nav > li > a:hover,
		.navbar-default .navbar-nav > li > a:focus*/
    .navbar-default .navbar-nav > li > a.active,
    .navbar-default .navbar-nav > li > a > i {
        color: #0072bb;
    }


    .navbar-default .navbar-nav > li > a > i {
        font-size: 25px;
    }

        .navbar-default .navbar-nav > li > a > i:hover,
        .navbar-default .navbar-nav > li > a > i:active,
        .navbar-default .navbar-nav > li > a > i:focus {
            color: #0a5a8f;
        }

.navbar-default .container-fluid .nav {
    color: black;
    height: 100%;
    font-size: 16px;
}

    .navbar-default .container-fluid .nav li {
            padding: 5% 15px;
        height: 100%;
    }

        .navbar-default .container-fluid .nav li a {
            padding: 0;
            margin: 0;
        }

    .navbar-default .container-fluid .nav .dropdown-menu > li {
        padding: 0;
    }

        .navbar-default .container-fluid .nav .dropdown-menu > li > a {
            padding: 3px 20px;
            color: black;
        }

            .navbar-default .container-fluid .nav .dropdown-menu > li > a:hover,
            .navbar-default .container-fluid .nav .dropdown-menu > li > a:focus,
            .navbar-default .container-fluid .nav .dropdown-menu > li > a:active {
                color: #0072bb;
                background-color: transparent;
            }


html > /**/ body .col-xl-2-5,
html > /**/ body .col-lg-2-5,
html > /**/ body .col-md-2-5,
html > /**/ body .col-sm-2-5,
html > /**/ body .col-xs-2-5 {
    padding: 0 15px;
    float: left;
    position: relative;
    min-height: 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    padding: 0 15px;
    float: left;
    position: relative;
    min-height: 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.text-success {
    color: #00bda3;
}

.text-danger {
    color: #d11718;
}

.text-info {
    color: #358ed7;
}
/*----- END: Bootstrap overrides -----*/

.navbar-default .container-fluid .nav li.user-icon {
    padding: 3.5% 15px;
}

li.user-icon > a {
    background-color: #0072bb;
}
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    max-height:100%;
}

li.user-icon > a,
div.user,
span.user {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: table;
    vertical-align: middle;
}

.user-label-container {
    display: inline-block;
    vertical-align: top;
}

.navbar-default .navbar-nav > li.user-icon > a:hover,
.navbar-default .navbar-nav > li.user-icon > a:focus,
.navbar-default .navbar-nav > li.user-icon > a:active,
.navbar-default .navbar-nav > .open > a {
    background-color: #0a5a8f;
    color: white;
}

.initials {
    display: table-cell;
    vertical-align: middle;
    color: white;
    text-transform: uppercase;
}

.navbar-default .navbar-nav > li > a.mnu-icon {
    color: #0072bb;
}

    .navbar-default .navbar-nav > li > a.mnu-icon:hover {
        color: #0a5a8f;
    }

.search-icon,
.bell-icon,
.actions-icon {
    width: 32px;
    height: 32px;
    fill: currentColor;
    vertical-align: bottom;
}

.add-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.success-icon, .error-icon {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

.edit-icon,
.mail-icon,
.download-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    vertical-align: bottom;
}

.lock-icon,
.unlock-icon {
    width: 20px;
    height: 18px;
    fill: currentColor;
    vertical-align: bottom;
}

.move-icon {
    width: 25px;
    height: 25px;
    fill: currentColor;
    vertical-align: bottom;
}


.cross-icon, .refresh-icon, .help-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
    vertical-align: bottom;
}

.btn .refresh-icon, .btn .help-icon {
    width: 18px;
    height: 20px;
}

/*.bell-icon {
	width: 32px;
	height: 32px;
	fill: currentColor;
	vertical-align: bottom;
}

.actions-icon {
	width: 32px;
	height: 32px;
	fill: currentColor;
	vertical-align: bottom;
}*/


#sidebar {
    width: 320px;
    float: none;
    height: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    padding-top: 20px;
    display: table-cell;
}

body {
    background-color: #fbfbfb;
    letter-spacing: 0.3px;
}

.main-content {
    padding-left: 0;
    height: 100%;
    width: 100%;
    padding-top: 80px;
}

#EditorForm textarea {
    width: 100%;
}

#sidebar ul,
ul.vertical-nav {
    list-style-type: none;
    padding: 0;
}

    #sidebar ul li,
    ul.vertical-nav li {
        font-size: 14px;
        font-weight: normal;
        letter-spacing: 0.6px;
        padding: 5px 0;
    }

        ul.vertical-nav li:first-child {
            padding-top: 0;
        }

        ul.vertical-nav li:last-child {
            padding-bottom: 0;
        }

.archive-statuses .btn.btn-primary.active {
    color: white;
    background-color: #0072bb;
    border: 1px solid #0072bb;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.archive-statuses {
    padding-top: 20px;
    padding-bottom: 20px;
}

    .archive-statuses .title-xsmall {
        padding-right: 15px;
    }

    .archive-statuses button.btn.btn-primary {
        text-transform: none;
        background-color: #cccccc;
        border: 1px solid #cccccc;
        margin-left: 15px;
        font-size: 14px;
        letter-spacing: 0.4px;
        width: 140px;
        text-align: center;
        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.09);
        color: #4c4c4c;
    }

.title-xsmall {
    display: inline-block;
    font-size: 14px;
    letter-spacing: 0.4px;
    color: #358ed7;
}

.table.orders-table {
    width: 100%;
}

    .table.orders-table thead {
        background-color: #fbfbfb;
        box-shadow: 0 10px 10px 5px rgba(0, 0, 0, 0.09);
    }

        .table.orders-table thead tr th:first-child,
        .table.orders-table tbody tr td:first-child {
            padding-left: 15px;
        }

        .table.orders-table thead tr th,
        .table.orders-table tbody tr td {
            padding-right: 15px;
            vertical-align: middle;
        }

        .table.orders-table thead tr th {
            color: #358ed7;
            font-size: 14px;
            letter-spacing: 0.4px;
            padding: 25px 0;
            font-weight: normal;
            border: none;
        }

            .table.orders-table thead tr th a,
            .table.orders-table tbody tr td.link a {
                color: #358ed7;
                cursor: pointer;
            }

                .table.orders-table thead tr th a:hover,
                .table.orders-table thead tr th a:active,
                .table.orders-table thead tr th a:focus,
                .table.orders-table tbody tr td.link a:hover,
                .table.orders-table tbody tr td.link a:active,
                .table.orders-table tbody tr td.link a:focus {
                    color: #0a5a8f;
                    text-decoration: none;
                }

.table.schedules-table {
    width: 100%;
}

    .table.schedules-table thead {
        background-color: #fbfbfb;
        box-shadow: 0 10px 10px 5px rgba(0, 0, 0, 0.09);
    }

        .table.schedules-table thead tr th:first-child,
        .table.schedules-table tbody tr td:first-child {
            padding-left: 15px;
        }

        .table.schedules-table thead tr th,
        .table.schedules-table tbody tr td {
            padding-right: 15px;
            vertical-align: middle;
        }

        .table.schedules-table thead tr th {
            color: #358ed7;
            font-size: 14px;
            letter-spacing: 0.4px;
            padding: 25px 0;
            font-weight: normal;
            border: none;
        }

            .table.schedules-table thead tr th a,
            .table.schedules-table tbody tr td.link a {
                color: #358ed7;
                cursor: pointer;
            }

                .table.schedules-table thead tr th a:hover,
                .table.schedules-table thead tr th a:active,
                .table.schedules-table thead tr th a:focus,
                .table.schedules-table tbody tr td.link a:hover,
                .table.schedules-table tbody tr td.link a:active,
                .table.schedules-table tbody tr td.link a:focus {
                    color: #0a5a8f;
                    text-decoration: none;
                }

a.sortable:after,
.sort-asc:after,
.sort-desc:after {
    font-family: FontAwesome;
    margin-left: 10px;
    font-size: 12px;
}

a.sortable:after {
    content: "\f0dc";
    color: #cccccc;
}

.sortable.asc:after {
    content: "\f0de";
    color: #333333;
}

.sortable.desc:after {
    content: "\f0dd";
    color: #333333;
}

.table.table-orders tbody {
    color: #222222;
}

.table.orders-table tbody tr td {
    letter-spacing: 0.3px;
    text-align: left;
    font-size: 14px;
    padding: 25px 0 20px 0;
    font-weight: normal;
    border-bottom: 1px solid #e6e6e6;
}

.table.orders-table tbody tr .actions-cell {
    padding-right: 40px;
}

.table.orders-table tbody tr td .fa-circle {
    font-size: 10px;
}


.table.orders-table tr input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 2px solid #606060;
    width: 15px;
    height: 15px;
    position: relative;
    background-color: white;
    margin-right: 30px;
}

    .table.orders-table tr input[type="checkbox"]:checked:after {
        content: '✔';
        position: absolute;
        top: 0;
        left: 0;
        line-height: 0.8;
        color: #34495e;
        transition: all .2s;
    }

.actions-btn {
    color: #b2b2b2;
}

    .actions-btn:hover,
    .actions-btn:active,
    .actions-btn:focus {
        color: #8c8c8c;
    }

.actions-popover {
    border-radius: 8px;
    color: #fbfbfb;
    box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.19);
    width: 250px;
}

    .actions-popover .popover-item {
        padding: 10px 50px 10px 0;
        font-size: 14px;
        letter-spacing: 0.4px;
    }

.popover-item a {
    color: #4c4c4c;
}


    .popover-item a:hover,
    .popover-item a:hover,
    .popover-item a:hover {
        text-decoration: none;
        color: #1c1c1c;
    }

.actions-popover .popover-item .icon {
    margin-right: 10px;
    opacity: 0.5;
}

ul li a {
    color: black;
}

    .navbar-default .navbar-nav > li > a:hover,
    ul li a.mnu-link:hover,
    ul li a.mnu-link:active,
    ul li a.mnu-link:focus,
    ul li a.mnu-link.active {
        color: #0072bb;
        text-decoration: none;
    }

#content {
    padding-top: 30px;
    overflow-y: auto;
    float: none;
}

.breadcrumb {
    margin: 0;
    padding-left: 0;
    background-color: transparent;
    border-radius: 0;
}

    .breadcrumb a {
        color: #34495e;
    }

.title-small {
    margin: 20px 0;
    font-size: 18px;
    letter-spacing: 0.8px;
    font-weight: normal;
    color: #34495e;
}

#Details .title-small, #Copy .title-small {
    margin: 5px 0;
}

h4.title-small {
    font-size: 14px;
}

.no-left-padding {
    padding-left: 0;
}

.no-right-padding {
    padding-right: 0;
}

.SubmitText {
    width: 90px;
    height: 48px;
    font-family: OpenSans;
    font-size: 24px;
    font-weight: bold;
    line-height: 2;
    letter-spacing: 0.7px;
    text-align: left;
    color: #34495e;
}

.vendor {
    width: 242px;
    height: 17px;
    font-family: OpenSans;
    font-size: 14px;
    line-height: 1.36;
    letter-spacing: 0.3px;
    text-align: left;
    color: #34495e;
    margin: 2px;
}

.Add-Another {
    font-family: 'Open Sans';
    font-size: 14px;
    letter-spacing: 0.4px;
    text-align: left;
    color: #358ed7;
}

    .Add-Another > a {
        text-decoration: none;
        color: #358ed7;
    }

.right-image-submit {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.09);
    margin-left: 10px;
    margin-top: 20px;
    margin-right: 10px;
}


.Order {
    width: 100%;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.09);
    margin-left: 10px;
    margin-top: 20px;
    margin-right: 15px;
    padding: 30px;
}


.Check_box_base {
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border: solid 1px #dddddd;
}

.Stroke-23 {
    width: 2.2px;
    height: 2.3px;
    border: solid 2px #358ed7;
}

.right-image-submit img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    min-width: 38%;
    max-width: 100%;
}

li.borderless {
    border: 0 none;
    margin-left: 0;
    padding-left: 0;
}

    li.borderless > a {
        text-decoration: none;
        color: #358ed7;
    }

.Icon-thick-check {
    width: 7px;
    height: 5px;
    object-fit: contain;
}

.listDescription {
    width: 122px;
    height: 15px;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 100;
    letter-spacing: 0.8px;
    text-align: left;
    color: #34495e;
}

input.modal-style-input.form-control[type="text"],
.send-to-frame input.modal-style-input.form-control,
.send-to-frame select.modal-style-input.form-control {
    padding: 15px;
    height: auto;
    border-radius: 3px;
    font-family: 'Open Sans', FontAwesome, Verdana, sans-serif;
    font-size: 14px;
    box-shadow: none;
    border-color: rgb(224, 224, 224);
}

.modal .modal-postback-loading {
    left: 0;
    top: 0;
}

.modal #Colors {
    max-height: 70vh;
    overflow-y: auto;
}

.modal-style-input.form-control.input-medium {
    padding: 10px;
    line-height: 25px;
}

.Send-to-vendor {
    width: 122px;
    height: 19px;
    font-family: OpenSans;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.8px;
    text-align: left;
    color: #34495e;
}

input[type="text"].form-control {
    webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 4px;
    border: solid 1px #e0e0e0;
    font-family: 'Open Sans', FontAwesome, Verdana, sans-serif;
}

.search-container .search-input {
    padding-right: 10px;
}

.search-container {
    margin-bottom: 10px;
}

/*.search-container .search-input input {
        font-family: 'Open Sans', FontAwesome, Verdana, sans-serif;
    }*/

.btn.btn-search {
    width: 100%;
    color: #0072bb;
    border: solid 1px #e1e1e1;
    border-radius: 4px;
    background-color: #fbfbfb;
}

    .btn.btn-search:hover,
    .btn.btn-search:active {
        background-color: #e1e1e1;
    }

.products {
    width: 100%;
    padding-top: 30px;
    margin: 0 -10px;
}

.product-container {
    height: 350px;
    padding: 0 10px;
    margin-bottom: 40px;
}

div.product {
    border-radius: 2px;
    background-color: #ffffff;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.09);
    height: 345px;
}

.product .bottom-title {
    width: 70%;
    background-color: #0072bb;
    color: white;
    height: auto;
    min-height: 40px;
    margin: 0 auto;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.19);
    border: solid 1px #0072bb;
    font-size: 12px;
    font-weight: 500;
    font-family: Lato;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .product .bottom-title a,
    .product .bottom-title a:hover,
    .product .bottom-title a:visited,
    .product .bottom-title a:active,
    .product .bottom-title a:focus {
        color: white;
        text-decoration: none;
    }

.size-banner {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
}

.title-banner {
    position: absolute;
    left: 0;
    width: 100%;
    top: 325px;
}


div.stack-1, div.stack-2 {
    background: white;
    border-radius: 2px;
    height: 350px;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.09);
    -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.09);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.09);
}

div.stack-1 {
    margin: 0 15px;
    top: -6px;
    position: absolute;
    webkit-width: calc(100% - 50px);
    moz-width: calc(100% - 50px);
    width: calc(100% - 50px);
    z-index: -1;
    /*Dirty IE8 hack*/
    height: 0px\9;
    width: 0px\9;
    border: none\9;
}

div.stack-2 {
    top: -12px;
    webkit-width: calc(100% - 80px);
    moz-width: calc(100% - 80px);
    width: calc(100% - 80px);
    margin: 0 30px;
    position: absolute;
    z-index: -1;
    /*Dirty IE8 hack*/
    height: 0px\9;
    width: 0px\9;
    border: none\9;
}

div.image-container {
    height: 280px;
    padding: 10px 20px 0 20px;
    width: 100%;
}

    div.image-container img {
        max-height: 100%;
        max-width: 100%;
        box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.29);
    }

    div.image-container .no-shadow {
        box-shadow: none;
    }

.size-container {
    height: auto;
    min-height: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.title-container {
    height: 70px;
    width: 100%;
    padding: 10px 20px;
}

    div.title-container .title {
        font-size: 12px;
        letter-spacing: 0.5px;
        color: white;
        text-transform: uppercase;
    }

.middle {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

div.promo {
    position: relative;
    border-radius: 0;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.09);
    margin-bottom: 0;
    margin-top: 20px;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.8) url('../images/promo-bg.jpg') no-repeat right center;
    background-size: cover;
    height: 60vh;
    min-height: 500px;
}

.promo .promo-footer {
    padding: 15px 20px;
    font-family: Lato;
    font-size: 18px;
    font-size: 1vw;
    font-weight: bold;
    letter-spacing: 0.7px;
    text-align: left;
    color: #fbfbfb;
    position: absolute;
    width: 100%;
    bottom: 0;
}

.promo-footer span {
    height: 100%;
    vertical-align: middle;
}

.btn {
    border-radius: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

    .btn.btn-default {
        color: black;
        background-color: #f3f3f3;
        border: 1px solid #f3f3f3;
        text-transform: uppercase;
    }

        .btn.btn-default:hover,
        .btn.btn-default:active,
        .btn.btn-default:focus {
            background-color: #e1e1e1;
            border: 1px solid #e1e1e1;
        }

.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus  {
    outline: none !important;
    border: none !important;
}

        .btn.btn-default.text-primary {
            color: #0072bb;
        }

    .btn.btn-primary {
        /*border-radius: 40px;
    padding-left: 20px;
    padding-right: 20px;*/
        color: white;
        background-color: #0072bb;
        border: 1px solid #0072bb;
        text-transform: uppercase;
    }

        .btn.btn-primary:hover,
        .btn.btn-defaultprimary:active,
        .btn.btn-primary:focus {
            background-color: #0a5a8f;
            border: 1px solid #0a5a8f;
        }


.notification {
    position: relative;
}

.notification-badge {
    background-color: #00bda3;
    border-radius: 4px;
    color: white;
    padding: 4px 4px;
    font-size: 10px;
    position: absolute; /* Position the badge within the relatively positioned button */
    top: -5px;
    right: 0;
    visibility: hidden;
}

    .notification-badge.has-unread {
        visibility: visible;
    }

.notification:hover .notification-badge.has-unread,
.notification:active .notification-badge.has-unread,
.notification:focus .notification-badge.has-unread:focus {
    background-color: #009985;
}

.notification .notification-panel.visible {
    visibility: visible;
}

.notification .notification-panel {
    width: 350px;
    background-color: #fbfbfb;
    border-radius: 4px;
    box-shadow: 0 1px 20px 6px rgba(0, 0, 0, 0.15);
    position: absolute;
    z-index: 1;
    top: 80%;
    right: -90%;
    visibility: hidden;
}

    .notification .notification-panel::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 74%;
        margin-left: -12px;
        border-width: 12px;
        border-style: solid;
        border-color: transparent transparent #fbfbfb transparent;
    }

.notification-panel .notification-panel-header {
    padding: 10px 15px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 14px;
    background-color: #00bda3;
}

    .notification-panel .notification-panel-header .notification-panel-title {
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #fbfbfb;
    }

.notification-panel-body div:last-child {
    margin-bottom: 10px;
}

.notification-panel-body {
    max-height: 80vh;
    overflow-y: auto;
}

    .notification-panel-body .notification-body-item {
        border-bottom: 1px solid #e6e6e6;
        padding: 10px 15px 5px 15px;
        background-color: #fbfbfb;
        font-size: 14px;
    }

.user {
    padding: 2px;
    border-radius: 50%;
    background-color: #00bda3;
    display: inline-block;
    font-size: 14px;
    width: 44px;
    text-align: center;
    vertical-align: top;
}

.notification-panel-body .notification-body-item-content {
    display: inline-block;
    color: #354a5f;
    max-width: 80%;
}

.help-block {
    letter-spacing: 0.4px;
    color: #cccccc;
}

.badge-default {
    background-color: white;
    color: #00bda3;
    font-weight: normal;
    padding: 3px 12px;
}

.review-item {
    font-size: 14px;
    letter-spacing: 0.8px;
    text-align: left;
    color: #34495e;
    padding: 15px 0;
    border-bottom: 1px solid #f3f3f3;
}

    .review-item .review-content .review-item-header .help-block {
        margin-left: 15px;
        margin-bottom: 2px;
        margin-top: 0;
        display: inline-block;
    }

.review-content {
    display: inline-block;
    margin-left: 10px;
    font-size: 0.85vw;
    letter-spacing: 0.8px;
    width: 80%;
    color: #34495e;
}

.review-item .review-content .review-item-status {
    margin-top: 7px;
}

.modal-body .image-container {
    padding: 10px 0;
}

.modal-dialog {
    width: 65vw;
}

.modal-add-frame {
    width: 45vw;
}

.modal-header {
    border-bottom: none;
    padding: 5px 5px 5px 5px;
}

.modal-body {
    padding-left: 5px;
    padding-right: 5px;
}

.modal-header .modal-title {
    font-size: 24px;
    letter-spacing: 0.7px;
    color: #34495e;
}

button.close {
    color: #0072bb;
    background-color: white;
    position: absolute;
    opacity: 1;
    border-radius: 12px;
    padding: 4px;
    top: 0px;
    right: 0px;
    font-size: 14px;
}

.modal-header button.close {
    font-size: 18px;
    text-align: center;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.19);
    margin-top: -15px;
    z-index: 20;
    margin-right: -12px;
    right: 0;
}

    .modal-header button.close:hover,
    .modal-header button.close:focus,
    .modal-header button.close:active {
        color: #0a5a8f;
        opacity: 1;
    }

.modal-footer {
    border-top: none;
}

    .modal-footer .btn {
        margin-left: 10px;
        padding-left: 25px;
        padding-right: 25px;
    }


.download-container {
    padding: 20px 20px 20px 0;
}

.list-group-item {
    padding: 3px 10px;
}

.file-format-text {
    text-transform: uppercase;
}

.checkbox-container {
    padding: 8px 20px 8px 0;
}

    .checkbox-container label {
        display: inline-block;
        position: relative;
        padding-left: 5px;
    }

        .checkbox-container label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 17px;
            height: 17px;
            left: 0;
            margin-left: -40px;
            border: 1px solid #cccccc;
            border-radius: 1px;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        }

        .checkbox-container label::after {
            display: inline-block;
            position: absolute;
            width: 16px;
            height: 16px;
            left: 0;
            top: 0;
            margin-left: -40px;
            padding-left: 3px;
            padding-top: 1px;
            font-size: 11px;
            color: #555555;
        }

    .checkbox-container input[type="checkbox"] {
        opacity: 0;
    }

.checkbox input[type="checkbox"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.checkbox input[type="checkbox"]:checked + label::after {
    font-family: 'FontAwesome';
    content: "\f00c";
    color: blue;
}

.checkbox input[type="checkbox"]:disabled + label {
    opacity: 0.65;
}

    .checkbox input[type="checkbox"]:disabled + label::before {
        background-color: #eeeeee;
        cursor: not-allowed;
    }

.checkbox.checkbox-circle label::before {
    border-radius: 30%;
}

.checkbox.checkbox-inline {
    margin-top: 0;
}

.checkLabel {
    width: 242px;
    height: 14px;
    font-family: OpenSans;
    font-size: 14px;
    line-height: 1.36;
    letter-spacing: 0.3px;
    text-align: left;
    color: #34495e;
}

.File-format {
    width: 91px;
    height: 19px;
    font-family: OpenSans;
    font-size: 14px;
    letter-spacing: 0.8px;
    text-align: left;
    color: #34495e;
}

.btnSubmit {
    width: 122px;
    height: 44px;
    border-radius: 100px;
    background-color: #0072bb;
    font-family: 'Open Sans', Verdana, sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: #ffffff;
    border: none;
    float: right;
}

.btnCancel {
    width: 122px;
    height: 44px;
    border-radius: 100px;
    background-color: #f3f3f3;
    font-family: 'Open Sans', Verdana, sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: black;
    border: none;
    float: left;
}

.Comment {
    font-family: 'Open Sans';
    font-size: 14px;
    padding: 10px;
    width: 100%;
    border-radius: 3px;
    background-color: #ffffff;
    border: solid 1px #dddddd;
}

#SearchImages {
    margin-bottom: 10px;
}


.ForComments {
    width: 192px;
    height: 19px;
    font-family: OpenSans;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.8px;
    text-align: left;
    color: #34495e;
}

.textStyle {
    font-family: sans-serif;
    font-weight: inherit;
    font-size: 16px;
    margin-bottom: 22px;
}

.rectangle {
    padding: 15px 20px;
}

    .rectangle.background {
        border-radius: 8px;
        background-color: #00bda3;
        box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.09);
        margin-bottom: 25px;
    }

#WysiwygButton {
    cursor: pointer;
}

    #WysiwygButton .rectangle.dashed {
        transition: padding 0.15s ease-in-out, border-style 0.15s ease-in-out;
    }

#buttons {
    padding: 0 5px 15px 5px;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.09);
    margin-top: 15px;
}

    #buttons .btn {
        margin: 15px 0 0 0;
    }

/*#EditorImage .no-slides {
    display:inline-block;
}*/
#EditorImage {
    /*height: calc(100vh - 176px);*/
    text-align: center;
    position: fixed;
    top: 156px;
    bottom: 0;
    right: 0;
}

.editor {
    padding: 20px 0;
}

.image-preview {
    height: calc(100vh - 300px);
    border-radius: 8px;
    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.09);
}

.rectangle.dashed {
    border: dashed 1px #ffffff;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

    .rectangle.dashed button.close {
        top: 5px;
        right: 25px;
    }

        .rectangle.dashed button.close:hover {
            opacity: 1;
        }

        .rectangle.dashed button.close .cross-icon {
            width: 12px;
            height: 12px;
        }

.rectangle-text {
    font-family: 'Open Sans', Verdana, sans-serif;
    font-size: 18px;
    letter-spacing: 0.8px;
    text-align: left;
    color: #ffffff;
}


div.editor-box {
    margin-left: 0px;
    margin-right: 0px;
    padding-bottom: 25px;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.09);
    height: calc(100vh - 115px);
    width: 100%;
    overflow-y: hidden;
}
    /*div.editor-box form {
        height: calc(100vh - 225px);
        width:100%;
    overflow-y:hidden;
    }*/
    /*div.editor-box form:hover {
        overflow:auto;
    }*/
    div.editor-box:hover {
        overflow: auto;
    }

    div.editor-box #Colors .row {
        display: flex;
        margin-bottom: 15px;
        align-items: center;
    }

.fields-group {
    margin-top: 10px;
}

.inline {
    display: inline-block;
}

div.editor-box #fields {
    padding: 0 5px;
    height: 100%;
}

nav.editor-navigation-container {
    padding: 0 20px;
    border-bottom: 1px solid #d8d8d8;
    border-radius: 0px;
}

ul.editor-navigation {
    display: inline-block;
    list-style-type: none;
    padding: 0px;
    margin: 20px 0;
}

div ul.editor-navigation li {
    font-family: 'Open Sans', Verdana, sans-serif;
    line-height: 2;
    letter-spacing: 0.7px;
    font-size: 1.6vw;
    display: inline;
    padding-right: 5vw;
}

.nav.editor-navigation > li > a {
    padding: 0;
    display: inline;
}

div ul.editor-navigation li .mnu-link {
    color: #34495e;
}

    div ul.editor-navigation li .mnu-link:hover,
    div ul.editor-navigation li .mnu-link:active,
    div ul.editor-navigation li .mnu-link:focus,
    div ul.editor-navigation li .mnu-link.active {
        color: #0072bb;
        text-decoration: none;
    }

.sectionName {
    height: 24px;
    font-family: 'Open Sans', Verdana, sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-align: left;
    color: #34495e;
    padding-left: 55px;
}

.editor-title-container {
    padding: 10px 0;
}

div.inner-address-box {
    height: 120px;
    background-color: #ffffff;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 20px;
}

    div.inner-address-box.image-container img {
        box-shadow: none;
    }

.btnAddAdress {
    width: 173px;
    height: 40px;
    border-radius: 100px;
    background-color: #f3f3f3;
    font-family: 'Open Sans', Verdana, sans-serif;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #000000;
    border: none;
}

.displayImages {
    padding-left: 20px;
    padding-top: 10px;
}

.rb {
    font-size: 14px;
    line-height: 1.36;
    letter-spacing: 0.3px;
    text-align: left;
    color: #34495e;
}

div .ddlColors {
    padding-left: 30px;
    margin-top: 40px;
}

.refreshIcon {
    width: 75px;
    height: 44px;
    border-radius: 100px;
    background-color: #f3f3f3;
    border: none;
}
/*i.kello*/
.menu {
    font-family: sans-serif;
    font-size: 100%;
    font-weight: 500;
    line-height: 1.36;
    letter-spacing: 0.3px;
    text-align: left;
    color: #34495e;
    width: 117px;
    height: 19px;
}

.item {
    width: 192px;
    height: 19px;
    font-family: 'Open Sans';
    font-size: 14px;
    letter-spacing: 0.8px;
    text-align: left;
    color: #34495e;
}

.li-item {
    font-family: 'Open Sans';
    font-size: 14px;
    line-height: 1.0;
    letter-spacing: 0.8px;
    text-align: left;
    color: #34495e;
}

.submit-title {
    margin-top: 0px;
    font-family: 'Open Sans';
    color: #34495e;
    letter-spacing: 0.7px;
    text-align: left;
}

.padding-10 {
    padding: 0 10px;
}

.padding-children-10 {
    margin: 0 -10px;
}


.hoverable {
    transition: all ease 0.2s;
    cursor: pointer;
}

    .hoverable.active,
    .hoverable.active {
        box-shadow: 0 0 5px 2px rgba(44, 163, 240, 0.8);
    }

    .hoverable:not(.active):hover,
    .hoverable:not(.active):active,
    .hoverable:not(.active):focus {
        box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.20);
    }

.cke.cke_reset {
    padding: 3px;
    border-radius: 2px;
    border-color: #e6e6e6;
}

.cke .cke_top {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
}

    /*.cke.cke_editor_copyArea .cke_top .cke_toolbar .cke_toolgroup .cke_toolbar_separator {
            display:none;
        }*/

    .cke .cke_top .cke_toolbar .cke_toolgroup .cke_button {
        border: 1px solid #e6e6e6;
        margin: 0 1px;
        border-radius: 2px;
    }

.cke .cke_contents {
    margin-top: 3px;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
}

.cke .cke_bottom {
    background-color: #fff;
    padding-top: 0;
    padding-bottom: 0;
    border: none;
}

.cke .cke_top a.cke_button_off:hover,
.cke .cke_top a.cke_button_off:focus,
.cke .cke_top a.cke_button_off:active {
    padding: 4px 6px;
}

.modal-gray .modal-dialog .modal-content {
    background-color: #fbfbfb;
}

.modal-content {
    padding: 10px;
}

.colors-container {
    padding: 0 5px;
}

.color-item {
    color: white;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.29);
    padding: 10px;
    font-size: 22px;
    display: inline-block;
    margin: 3px;
}

/*.color-item-smaller {
    color: white;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.29);
    padding: 2px;
    font-size: 14px;
    display: inline-flex;
    margin: 3px;
}*/

.color-item-span {
    width: 60px;
    height: 50px;
    text-overflow: clip;
    display: inline-block;
    line-height: 13px;
    word-break: break-all;
}

.box {
    font-size: 1.25rem; /* 20 */
    background-color: transparent;
    position: relative;
    padding: 70px 20px;
    color: #42a4dd;
}

    .box .box-input label {
        font-weight: normal;
    }

        .box .box-input label span.big {
            font-size: 24px;
            line-height: 2;
            letter-spacing: 2px;
        }

        .box .box-input label span.drop {
            display: none;
        }

    .box.has-advanced-upload {
        border: 2px dashed #42a4dd;
        border-radius: 8px;
        -webkit-transition: outline-offset .15s ease-in-out, background-color .15s ease-in-out, color .15s ease-in-out, border-width 0.15s ease-in-out;
        -o-transition: outline-offset .15s ease-in-out, background-color .15s ease-in-out, color .15s ease-in-out, border-width 0.15s ease-in-out;
        transition: outline-offset .15s ease-in-out, background-color .15s ease-in-out, color .15s ease-in-out, border-width 0.15s ease-in-out;
    }

    .box.is-dragover,
    .box.is-uploading {
        background-color: #fff;
        color: #0a5a8f;
        border-color: #0a5a8f;
        border-width: 4px;
    }

        .box.is-dragover .box-input label span.drop {
            display: inline;
        }

        .box.is-dragover .box-input label span.drag,
        .box.is-dragover .box-input label span.box-dragndrop {
            display: none;
        }


.box-dragndrop,
.box-icon {
    display: none;
}

.box.has-advanced-upload .box-dragndrop {
    display: inline;
}

.box.has-advanced-upload .box-icon {
    width: 100%;
    height: 80px;
    fill: currentColor;
    display: block;
    margin-bottom: 10px;
}

.box.is-uploading .box-input,
.box.is-success .box-input,
.box.is-error .box-input {
    visibility: hidden;
}

.box-uploading,
.box-success,
.box-error {
    display: none;
}

.box.is-uploading .box-uploading,
.box.is-success .box-success,
.box.is-error .box-error {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    -webkit-transform: translateY( -50% );
    transform: translateY( -50% );
}


.box-success {
    -webkit-animation: appear-from-inside .25s ease-in-out;
    animation: appear-from-inside .25s ease-in-out;
}

.popup-image-container.image-container {
    height: auto;
    padding: 0;
}

@-webkit-keyframes appear-from-inside {
    from {
        -moz-transform: translateY( -50% ) scale( 0 );
        -ms-transform: translateY( -50% ) scale( 0 );
        -o-transform: translateY( -50% ) scale( 0 );
        -webkit-transform: translateY( -50% ) scale( 0 );
        transform: translateY( -50% ) scale( 0 );
    }

    75% {
        -moz-transform: translateY( -50% ) scale( 1.1 );
        -ms-transform: translateY( -50% ) scale( 1.1 );
        -o-transform: translateY( -50% ) scale( 1.1 );
        -webkit-transform: translateY( -50% ) scale( 1.1 );
        transform: translateY( -50% ) scale( 1.1 );
    }

    to {
        -webkit-transform: translateY( -50% ) scale( 1 );
        -moz-transform: translateY( -50% ) scale( 1 );
        -ms-transform: translateY( -50% ) scale( 1 );
        -o-transform: translateY( -50% ) scale( 1 );
        transform: translateY( -50% ) scale( 1 );
    }
}

@-moz-keyframes appear-from-inside {
    from {
        transform: translateY( -50% ) scale( 0 );
    }

    75% {
        transform: translateY( -50% ) scale( 1.1 );
    }

    to {
        transform: translateY( -50% ) scale( 1 );
    }
}

@keyframes appear-from-inside {
    from {
        transform: translateY( -50% ) scale( 0 );
    }

    75% {
        transform: translateY( -50% ) scale( 1.1 );
    }

    to {
        transform: translateY( -50% ) scale( 1 );
    }
}

.box-restart {
    font-weight: 700;
}

    .box-restart:focus,
    .box-restart:hover {
        color: #0a5a8f;
    }

.js .box-file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

    .js .box-file + label {
        max-width: 80%;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
    }

        .js .box-file + label:hover strong,
        .box-file:focus + label strong,
        .box-file.has-focus + label strong {
            color: #42a4dd;
        }

    .js .box-file:focus + label,
    .js .box-file.has-focus + label {
        outline: 1px dotted #000;
        outline: -webkit-focus-ring-color auto 5px;
    }

.no-js .box-file + label {
    display: none;
}

.hidden {
    display: none;
}

.page-load-status {
    display: none; /* hidden by default */
    text-align: center;
    color: #777;
}

.image-library.are-images-unloaded {
    opacity: 0;
}

.image-library {
    position:static;
}

div.grid-item,
.grid-col-sizer {
    width: 11%;
    position: relative;
}

    div.grid-item::before {
        content: "";
        display: block;
        padding-top: 100%;
    }

div.grid-item {
    padding: 8px 5px 5px 5px;
    float: left;
}

.grid-gutter-sizer {
    width: 2%;
}

/* hide by default */
.grid.are-images-unloaded .image-grid-item {
    opacity: 0;
}


div.grid-item > img {
    max-width: 93%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}


.mnu-search-tool .mnu-search-box-container {
    width: 0px;
    display: inline-block;
    overflow: hidden;
    -webkit-transition: width 0.2s,; /* For Safari 3.1 to 6.0 */
    -o-transition: width 0.2s,;
    transition: width 0.2s;
}

    .mnu-search-tool .mnu-search-box-container .mnu-search-box {
        display: none;
        padding: 4px 8px;
        width: 200px;
        background: transparent;
        color: #0072bb;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #0072bb;
        font-size: 14px;
    }

    .mnu-search-tool .mnu-search-box-container a {
        display: none;
    }

    .mnu-search-tool .mnu-search-box-container.open {
        width: 225px;
    }

        .mnu-search-tool .mnu-search-box-container.open .mnu-search-box {
            display: inline-block;
        }

        .mnu-search-tool .mnu-search-box-container.open a {
            display: inline;
        }

    .mnu-search-tool .mnu-search-box-container .cross-icon {
        background-color: transparent;
        color: #0072bb;
    }

        .mnu-search-tool .mnu-search-box-container .cross-icon:hover,
        .mnu-search-tool .mnu-search-box-container .cross-icon:active,
        .mnu-search-tool .mnu-search-box-container .cross-icon:focus {
            background-color: transparent;
            color: #0a5a8f;
        }

.modal-body ul {
    padding-left: 20px;
}

.popover-item > a.anchPop {
    text-decoration: none;
    color: #4c4c4c;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-align: left;
}

    .popover-item > a.anchPop:hover {
        text-decoration: none;
        color: #0072bb;
    }

.image-group-container > div.image {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 100px;
    width: 90px;
    position: relative;
    float: left;
}

    .image-group-container > div.image > img {
        max-height: 100%;
        max-width: 100%;
    }

.close.close-primary {
    background-color: #358ed7;
    color: white;
    opacity: 1;
}

    .close.close-primary .cross-icon {
        width: 12px;
        height: 12px;
    }

    .close.close-primary:hover,
    .close.close-primary:focus,
    .close.close-primary:active {
        color: white;
        opacity: 1;
        background-color: #0a5a8f;
    }

.product .loading {
    position: static;
    background-color: transparent;
}

    .product .loading p {
        color: #0072bb;
        position: static;
        display: table-cell;
        vertical-align: middle;
    }

.loading {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 5;
    display: none;
}

    .loading p {
        color: white;
        bottom: 40%;
        width: 100%;
        padding: 20px;
        position: absolute;
    }

        .loading p span {
            font-size: 24px;
        }

.flex {
    display: flex;
}

.v-middle {
    align-self: center;
}

.fields-container {
    padding-top: 10px;
    padding-bottom: 10px;
}

.lock-ratio-btn {
    margin-left: -30px;
    color: black;
    padding: 25px 0;
    text-align: right;
}

    .lock-ratio-btn:hover,
    .lock-ratio-btn:active,
    .lock-ratio-btn:focus {
        cursor: pointer;
    }

    .lock-ratio-btn.lock {
        border-top: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        border-right: 1px solid #bbb;
    }

        .lock-ratio-btn.lock .lock-icon,
        .lock-ratio-btn .unlock-icon {
            display: inline-block;
        }

        .lock-ratio-btn.lock .unlock-icon,
        .lock-ratio-btn .lock-icon {
            display: none;
        }

    .lock-ratio-btn button {
        border: none;
        padding: 0;
        color: black;
        right: -10px;
        line-height: 18px;
        display: inline-block;
        position: relative;
        background-color: white;
    }

        .lock-ratio-btn button:hover,
        .lock-ratio-btn button:active,
        .lock-ratio-btn button:focus {
            color: #101010;
            cursor: pointer;
        }

.btn.btn-square {
    border-radius: 3px;
}

.btn.details-btn {
    padding: 10px;
    line-height: 25px;
    letter-spacing: 0.3px;
    font-weight: 600;
}

.small-data-table {
    margin-bottom: 20px;
}

    .small-data-table, .small-data-table tr, .small-data-table tr th, .small-data-table tr td {
        border: none;
    }

        .small-data-table tr th, .small-data-table tr td {
            padding: 15px 15px 5px 15px;
        }

        .small-data-table tr td {
            font-size: 16px;
            letter-spacing: 0.3px;
            color: #222222;
        }

        .small-data-table tr th.big-data-label {
            padding-left: 0;
            font-size: 18px;
            font-weight: normal;
            letter-spacing: 0.5px;
            color: #34495e;
        }

.small-data-label {
    font-size: 14px;
    letter-spacing: 0.8px;
    font-weight: normal;
    color: #34495e;
}

.modal-body form textarea {
    border-radius: 3px;
    border: solid 1px #dddddd;
}

.modal-postback-loading {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 19;
    background: rgba(255,255,255,0.8);
    display: none;
    border-radius: 6px;
}

.error-message {
    color: #cccccc;
    font-size: 18px;
}


.success-message {
    color: #358ed7;
    font-size: 18px;
}

.digital-signage-action {
    padding-right: 10px;
}

@keyframes lds-spinner {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes lds-spinner {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.lds-spinner {
    position: relative;
}

    .lds-spinner div {
        left: 50%;
        top: 110px;
        position: absolute;
        -webkit-animation: lds-spinner linear 0.9s infinite;
        animation: lds-spinner linear 0.9s infinite;
        background: #0072bb;
        width: 4px;
        height: 10px;
        border-radius: 40%;
        -webkit-transform-origin: 2px 19px;
        transform-origin: 2px 19px;
    }

        .lds-spinner div:nth-child(1) {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-animation-delay: -0.818181818181818s;
            animation-delay: -0.818181818181818s;
        }

        .lds-spinner div:nth-child(2) {
            -webkit-transform: rotate(32.72727272727273deg);
            transform: rotate(32.72727272727273deg);
            -webkit-animation-delay: -0.736363636363636s;
            animation-delay: -0.736363636363636s;
        }

        .lds-spinner div:nth-child(3) {
            -webkit-transform: rotate(65.45454545454545deg);
            transform: rotate(65.45454545454545deg);
            -webkit-animation-delay: -0.654545454545455s;
            animation-delay: -0.654545454545455s;
        }

        .lds-spinner div:nth-child(4) {
            -webkit-transform: rotate(98.18181818181819deg);
            transform: rotate(98.18181818181819deg);
            -webkit-animation-delay: -0.572727272727273s;
            animation-delay: -0.572727272727273s;
        }

        .lds-spinner div:nth-child(5) {
            -webkit-transform: rotate(130.9090909090909deg);
            transform: rotate(130.9090909090909deg);
            -webkit-animation-delay: -0.490909090909091s;
            animation-delay: -0.490909090909091s;
        }

        .lds-spinner div:nth-child(6) {
            -webkit-transform: rotate(163.63636363636363deg);
            transform: rotate(163.63636363636363deg);
            -webkit-animation-delay: -0.409090909090909s;
            animation-delay: -0.409090909090909s;
        }

        .lds-spinner div:nth-child(7) {
            -webkit-transform: rotate(196.36363636363637deg);
            transform: rotate(196.36363636363637deg);
            -webkit-animation-delay: -0.327272727272727s;
            animation-delay: -0.327272727272727s;
        }

        .lds-spinner div:nth-child(8) {
            -webkit-transform: rotate(229.0909090909091deg);
            transform: rotate(229.0909090909091deg);
            -webkit-animation-delay: -0.245454545454545s;
            animation-delay: -0.245454545454545s;
        }

        .lds-spinner div:nth-child(9) {
            -webkit-transform: rotate(261.8181818181818deg);
            transform: rotate(261.8181818181818deg);
            -webkit-animation-delay: -0.163636363636364s;
            animation-delay: -0.163636363636364s;
        }

        .lds-spinner div:nth-child(10) {
            -webkit-transform: rotate(294.54545454545456deg);
            transform: rotate(294.54545454545456deg);
            -webkit-animation-delay: -0.081818181818182s;
            animation-delay: -0.081818181818182s;
        }

        .lds-spinner div:nth-child(11) {
            -webkit-transform: rotate(327.27272727272725deg);
            transform: rotate(327.27272727272725deg);
            -webkit-animation-delay: 0s;
            animation-delay: 0s;
        }

.lds-spinner {
    width: 100%;
    height: 150px;
    -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
    transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}

div.ui-tooltip {
    max-width: 600px;
}

    div.ui-tooltip img {
        max-width: 580px;
    }

.frame-status {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
}

.frame-status-on {
    background-color: #0072bb;
}

.frame-status-off {
    background-color: #f3f3f3;
}

form.send-to-frame div.field-container {
    margin-bottom: 10px;
}

div.frames-table {
    height: 645px;
    overflow-y: hidden;
}

    div.frames-table:hover {
        overflow-y: auto;
    }

div.buttons {
    padding-top: 10px;
}

div.validation-summary-errors ul {
    list-style-type: none;
    margin-left: 0px;
    padding-left: 0px;
}

.product .close {
    top: -10px;
    right: 5px;
}

.notification-box {
    visibility: hidden;
    width: 300px;
    border-radius: 8px;
  background-color: #fbfbfb;
  box-shadow: 0 1px 20px 6px rgba(0, 0, 0, 0.15);
    color: #354a5f;
    padding: 15px;
    position: fixed;
    z-index: 1;
    right: 30px;
    top: 110px;
    font-size: 12px;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.09);
}

    .notification-box.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s;
        animation: fadein 0.5s;
    }

.tooltip-arrow {
    display:none;
}
.tooltip {
width:auto;
padding:0;
text-align:center;
background:none;
z-index:500;
opacity:1 !important;
}

.tooltip-inner {
    max-width: none;
    max-height: none;
    color: #0072bb;
    background:none;
    width:auto;
padding:0;
z-index:500;
opacity:1 !important;
}

@-webkit-keyframes fadein {
    from {
        left: 0;
        opacity: 0;
    }

    to {
        right: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        right: 0;
        opacity: 0;
    }

    to {
        right: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        right: 30px;
        opacity: 1;
    }

    to {
        right: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        right: 30px;
        opacity: 1;
    }

    to {
        right: 0;
        opacity: 0;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@media(max-width:767px) {
    col-xs-2-5 {
        width: 20%;
    }

    .search-container .search-input {
        padding-right: 15px;
    }

    li.user-icon > a {
        background-color: transparent;
        border-radius: 0;
    }

    .navbar-collapse {
        background-color: white;
        box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.09);
    }

    .navbar-default .container-fluid .nav li {
        padding: 10px 15px;
    }

    .modal-dialog {
        width: 80vw;
    }

    .image-preview {
        width: 60vw;
    }

    #EditorImage .fixed-bottom {
        position: static;
    }

    #EditorImage {
        height: 80vh;
        text-align: center;
    }

        #EditorImage .no-left-padding {
            padding-left: 15px;
        }

    div ul.editor-navigation li {
        font-size: 3.2vw;
    }
}

@media(max-width:400px) {
    .modal-dialog {
        width: 95vw;
    }

    .image-preview {
        width: 70vw;
    }
}

@media(min-width:768px) {
    col-sm-2-5 {
        width: 20%;
    }

    .modal-colors .modal-dialog {
        width: 770px;
    }

    #EditorImage div.fixed-bottom {
        position: fixed;
        bottom: 20px;
    }
}

@media(min-width:992px) {
    col-md-2-5 {
        width: 20%;
    }
}

@media(min-width:1200px) {
    col-lg-2-5 {
        width: 20%;
    }
}

@media(min-width:1500px) {
    .image-preview {
        width: 25vw;
        height: auto;
        max-height: calc(100vh - 300px);
    }

    .image-previewVertical
    {
        width: 15vw;
        height: auto;
        max-height: calc(100vh - 300px);
    }

    .col-xl-1 {
        width: 8.3333333%;
    }

    .col-xl-2 {
        width: 16.6666666%;
    }

    .col-xl-2-5 {
        width: 20%;
    }

    .col-xl-3 {
        width: 25%;
    }

    .col-xl-4 {
        width: 33.3333333%;
    }

    .col-xl-5 {
        width: 41.6666666%;
    }

    .col-xl-6 {
        width: 50%;
    }

    .col-xl-7 {
        width: 58.3333333%;
    }

    .col-xl-8 {
        width: 66.6666666%;
    }

    .col-xl-9 {
        width: 75%;
    }

    .col-xl-10 {
        width: 83.3333333%;
    }

    .col-xl-12 {
        width: 100%;
    }
}

h1 {
    color: #333;
    font-family: arial, sans-serif;
    margin: 1em auto;
    width: 80%;
}

.tabordion {
    color: #333;
    display: block;
    font-family: arial, sans-serif;
    margin: auto;
    position: relative;
    width: 80%;
}

    .tabordion input[name="sections"] {
        left: -9999px;
        position: absolute;
        top: -9999px;
    }

    .tabordion section {
        display: block;
    }

        .tabordion section label {
            background: #ccc;
            border: 1px solid #fff;
            cursor: pointer;
            display: block;
            font-size: 1.2em;
            font-weight: bold;
            padding: 15px 20px;
            position: relative;
            width: 180px;
            z-index: 100;
        }

        .tabordion section article {
            display: none;
            left: 230px;
            min-width: 300px;
            padding: 0 0 0 21px;
            position: absolute;
            top: 0;
        }

            .tabordion section article:after {
                background-color: #ccc;
                bottom: 0;
                content: "";
                display: block;
                left: -229px;
                position: absolute;
                top: 0;
                width: 220px;
                z-index: 1;
            }

    .tabordion input[name="sections"]:checked + label {
        background: #eee;
        color: #bbb;
    }

    .tabordion input[name="sections"]:checked ~ article {
        display: block;
    }


@media (max-width: 533px) {

    h1 {
        width: 100%;
    }

    .tabordion {
        width: 100%;
    }

        .tabordion section label {
            font-size: 1em;
            width: 160px;
        }

        .tabordion section article {
            left: 200px;
            min-width: 270px;
        }

            .tabordion section article:after {
                background-color: #ccc;
                bottom: 0;
                content: "";
                display: block;
                left: -199px;
                position: absolute;
                top: 0;
                width: 200px;
            }
}


@media (max-width: 768px) {
    h1 {
        width: 96%;
    }

    .tabordion {
        width: 96%;
    }
}


@media (min-width: 1366px) {
    h1 {
        width: 70%;
    }

    .tabordion {
        width: 70%;
    }
}

.vendor-tooltip {
    display: inline-block;
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

/* Tooltip classes */

/*[class^="tooltip"] {
    position: relative;
}*/
[class^="tooltip"]:after {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  content: attr(data-tooltip);
  padding: 6px 10px;
  top: 1.4em;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-2px);
          transform: translateX(-50%) translateY(-2px);
  background: grey;
  color: white;
  white-space: nowrap;
    z-index: 2;
  border-radius: 2px;
  -webkit-transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
}
[class^="tooltip"]:hover:after {
  display: block;
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(-50%) translateY(0);
          transform: translateX(-50%) translateY(0);
}

.tooltip--left:after {
  top: -4px;
  left: 0;
  -webkit-transform: translateX(-112%) translateY(0);
          transform: translateX(-112%) translateY(0);
    }
.tooltip--left:hover:after {
  -webkit-transform: translateX(-110%) translateY(0);
          transform: translateX(-110%) translateY(0);
}

.tooltip--right:after {
  top: -4px;
  left: 100%;
  -webkit-transform: translateX(12%) translateY(0);
          transform: translateX(12%) translateY(0);
    }
.tooltip--right:hover:after {
  -webkit-transform: translateX(10%) translateY(0);
          transform: translateX(10%) translateY(0);
}

.tooltip--triangle:before {
  content: '';
  width: 0;
  height: 0;
  border-left: solid 5px transparent;
  border-right: solid 5px transparent;
  border-bottom: solid 5px grey;
  opacity: 0;
  visibility: hidden;
        position: absolute;
  -webkit-transform: translateX(-50%) translateY(-2px);
          transform: translateX(-50%) translateY(-2px);
  top: 1.1em;
        left: 50%;
  -webkit-transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  z-index: 3;
    }
.tooltip--triangle:hover:before {
  display: block;
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(-50%) translateY(0);
          transform: translateX(-50%) translateY(0);
}

    /* Show tooltip content on hover */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
        visibility: visible;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
    }

.categories-container::after {
    display: none;
}

.floatRight {
    float: right;
}

.ddl-style {
    border: none;
    float: unset;
    box-shadow: 3px 2px 6px #8482825e;
    border-radius: 6px;
    padding: 0;
    padding: 0 5px;
    margin-left: 0
}

.hootsuite-style {
    margin: -20px 0px 0px 45px;
}

.remove-radio-buttons + .btn-group ul input[type="radio"] {
    display: none;
}

.remove-radio-buttons + .btn-group .multiselect-container > li > a > label {
    padding: 3px 20px 3px 20px;
}

.reviewer-row {
    margin: 0 15px 7% 15px;
    display: grid;
    align-items: center;
    grid-template-columns: 100px auto;
}

    .reviewer-row .btn-group.open {
        bottom: 0;
    }

@media ( max-width : 1500px ) {

    .reviewer-row {
        grid-template-columns: auto;
    }
}

@media ( max-width: 991px ) {
    .reviewer-row {
        margin: 7% 15px 2% 15px;
        grid-template-columns: 100px auto;
    }
}

.multiselect-container {
    left: 16px;
    min-width: 211px;
}

.multiselect-native-select .btn.btn-default {
    text-transform: unset;
    min-width: 243px;
}