@charset "UTF-8";

@font-face {
  font-family: "slideshow-constructor";
  src:url("font/flaticon/slideshow-constructor.eot");
  src:url("font/flaticon/slideshow-constructor.eot?#iefix") format("embedded-opentype"),
    url("font/flaticon/slideshow-constructor.woff") format("woff"),
    url("font/flaticon/slideshow-constructor.ttf") format("truetype"),
    url("font/flaticon/slideshow-constructor.svg#slideshow-constructor") format("svg");
  font-weight: normal;
  font-style: normal;

}

[class^="flaticon-"]:before,
[class*=" flaticon-"]:before {
  font-family: "slideshow-constructor" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
}

.flaticon-zoom-in:before             { content: "\63"; }
.flaticon-visibility-off:before      { content: "\65"; }
.flaticon-trash:before               { content: "\66"; }
.flaticon-bring-to-front:before      { content: "\67"; }
.flaticon-square:before              { content: "\68"; }
.flaticon-settings-work-tool:before  { content: "\69"; }
.flaticon-plus:before                { content: "\6a"; }
.flaticon-photo:before               { content: "\6b"; }
.flaticon-pencil-edit-button:before  { content: "\6c"; }
.flaticon-music-player-play:before   { content: "\6d"; }
.flaticon-minus-element-front:before { content: "\6f"; }
.flaticon-arrows:before              { content: "\71"; }
.flaticon-arrows-1:before            { content: "\72"; }
.flaticon-copy:before                { content: "\75"; }
.flaticon-interface:before           { content: "\78"; }
.flaticon-bring-to-back:before       { content: "\42"; }
.flaticon-eye-close-up:before        { content: "\74"; }
.flaticon-font-size:before           { content: "\76"; }
.flaticon-music-player-play2:before  { content: "\70"; }
.flaticon-shapes:before              { content: "\61"; }
.flaticon-button:before              { content: "\73"; }
.flaticon-download:before            { content: "\77"; }
.flaticon-close:before               { content: "\6e"; }
.flaticon-video:before               { content: "\79"; }

body { border: 0; margin: 0; padding: 0; min-width: 750px; }
html, body { height: 100%; overflow: hidden; }

.mtb-button {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 3px 8px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: transparent;
    color:#3e83be;
    margin-left: 5px;
}

.mtb-button.loading:before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    position: absolute;
    background-image: repeating-linear-gradient( -45deg, #e6e6e6, #e6e6e6 6px, #3e83be 5px, #3e83be 10px );
    background-size: 28px 28px;
    animation: loading-move 1s linear infinite;
}

@keyframes loading-move {
    0% { background-position: 0 0; }
    100% { background-position: 28px 0; }
}

.mtb-button.insert {
    color: #fff;
    background-color: #3e83be;
}

.mtb-button i {
    display: inline-block;
}

.mtb-button.disabled,
.mtb-button[disabled] {
    pointer-events: none;
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
    color: #ccc !important;
}

.mtb-button:hover {
    border-color: #3e83be;
}
.mtb-button:hover:active {
    border-color: #3e83be;
    /*box-shadow: inset 0px 0px 2px 1px rgba(62,131,190,0.5);*/
}

.mtb-button i + span {
    margin-left: 5px;
}

.main-wrapper {
    width: 100%;
    height: 100%;
    padding-top: 45px;
    position: relative;
    display: inline-block;
}

.main-wrapper .top-control-panel {
    top:0;
    left:0;
    width: 100%;
    height:45px;
    position: absolute;
    padding:10px;
    padding-left:0px;
    z-index: 100;
    background-color: #f5f5f5;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    display: content-box;
}

.top-control-panel .section {
    display: inline-flex;
    align-items: center;
    height: 100%;
    position: relative;
    vertical-align: top;
    padding: 0 5px;
    border-left: 1px solid #ccc;
}

.top-control-panel .section button:focus {
    outline: 0;
}

.top-control-panel .section:first-child {
    border: none !important;
    width: 195px;
}

.top-control-panel .section #control-button-lens-select {
    padding: 4px;
    font-size: 11px;
    border
}

.top-control-panel .section > select {
    margin-left: 5px;
}

.top-control-panel .section > span {
    margin-left: 9px;
}

.body {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    font-size: 0;
}
.body > div {
    font-size: 14px;
}

body #first-load {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    position: absolute;
    display: inline-block;
    background-color: white;
}

.body .slidesshow-opt-wrapper {
    position: relative;
    padding: 10px;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    box-sizing: border-box;
}

.body .magic-slideshow-wrapper {
    position: relative;
    padding: 20px;
    height: 100%;
}

.body .magic-slideshow-wrapper .slideshow-wrapper-size {
    position: relative;
    display: inline-block;
    text-align: center;
    width: 100%;
    height: 100%;
}

.body .magic-slideshow-wrapper .slideshow-center {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
}

.top-content,
.bottom-content {
    width: 100%;
    position: relative;
    display: inline-block;
}

.top-content {
    height: 90%;
}

.bottom-content {
    height: 10%;
}

.bottom-content .content-line {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: relative;
    display: inline-block;
    padding-top: 20px
}

.bottom-content .content-line .wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
}




/* slides */
.body .slides {
    top: 0px;
    left: 0px;
    width: 200px;
    height: 100%;
    display: inline-block;
    position: absolute;
    background-color: #ffffff;
}

.body .slides .slides-wrapper {
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

.slides .slides-wrapper .scroll {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
    text-align: center;
}


.slides .slides-wrapper #slides-control-add-new-slide {
    width: 32px;
    height:32px;
    border-radius: 50%;
    border:1px solid rgba(0,0,0,0.3);
    overflow:hidden;
    position: relative;
    color: #aaa;
    margin:0;
    outline: none;
    margin-top:10px;

}


.slides .slides-wrapper #slides-control-add-new-slide:hover {
    color: #3e83be;
    border-color: #3e83be;
}

.slides .slides-wrapper .slides-container {
    width: 100%;
    line-height: 100%;
    display: inline-block;
}


.slides .slides-wrapper .slides-container .slide-container {
    position: relative;
    width: 100%;
    padding: 15px 15px 0px 15px;

    box-sizing: border-box;
    display: inline-block;

    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
}

.slides .slides-wrapper .slides-container .slide-container .slide-min-wrapper {
    width: 100%;
    position: relative;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: none;
    display: inline-block;
    box-sizing: border-box;

    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    border-radius: 2px;
    background-color: #ffffff;
}


.slides .slides-wrapper .slides-container .slide-container .slide-min-number {
    top: 4px;
    left: 6px;
    z-index: 100;
    display: none;
    color: #3e83be;
    font-size: 11px;
    position: absolute;
}

.slides .slide-container .slide-min-wrapper button {
    top: 4px;
    right: 4px;
    margin: 0;
    width: 15px;
    height: 15px;
    display: none;
    position: absolute;
    border: none;
    box-shadow: none;
    z-index: 100;
    border: none !important;
    opacity: 0.7;
    text-shadow: 0px 0px 5px #ffffff, 0 0 1em #ffffff;
}

.slides .slide-container .slide-min-wrapper button i {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%) rotateZ(45deg);
}

.slides .slides-wrapper .slides-container .slide-container.active .slide-min-wrapper,
.slides .slides-wrapper .slides-container .slide-container:hover .slide-min-wrapper {
    border-color: #3e83be;
}

.slides .slides-wrapper .slides-container .slide-min-wrapper button:hover,
.slides .slides-wrapper .slides-container.active .slide-min-wrapper button {
    opacity:1;
}

.slides .slide-container:hover .slide-min-wrapper .slide-min-number,
.slides .slide-container.active .slide-min-wrapper .slide-min-number,
.slides .slide-container:hover .slide-min-wrapper button,
.slides .slide-container.active .slide-min-wrapper button {
    display: inline-block !important;
}

.slides .slides-wrapper .slides-container .slide-container .slide-min {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}
.slides .slides-wrapper .slides-container .slide-container .slide-min .video {
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 80%;
    background-color: #3e83be;
}

.slides .slides-wrapper .slides-container .slide-container .slide-min p {
    /*margin: auto !important;*/
    margin: 1em 0 !important;
}

.slides .slides-wrapper .slides-container .slide-container .slide-min .mss-slider,
.slides .slides-wrapper .slides-container .slide-container .slide-min .mss-slider .mss-slide {
    position: relative !important;
}
.slides .slides-wrapper .slides-container .slide-container .slide-min .mss-slide:after {
    content: none !important;
}


.slides .slides-wrapper .slides-container .slide-container .slide-name {
    text-align: center;
    margin-top: 10px;
    color: #4f4f4f;
}



/*slide-editor*/

.body .slide-editor {
    height: 100%;
    padding-left: 200px;
    /*padding-right: 300px;*/
    padding-right: 400px;
    box-sizing: border-box;
}

.body .slide-editor .slide {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.slide .display {
    position: absolute;
    top: 0px;
    height: 100%;
    box-sizing: border-box;
    width: 100%;
}

.slide .main-field {
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    /*box-shadow: inset 0px 0px 2px rgba(0,0,0,0.5);*/
    border-left: 1px solid rgba(0,0,0,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    background-color: #F5F5F5;
    padding: 10px;
}

.slide .main-field .working-field {
    width: 100%;
    height: 100%;
    overflow: auto;
    font-size: 0;
}

.working-field .scroll-scale {
    top: 0px;
    left: 0px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.1);
}

.slide .wrapper {
    display: inline-block;
    position: relative;
    /*box-sizing: border-box;*/
    background-color: white;
}
.slide .wrapper .mss-slider,
.slide .wrapper .mss-slide {
    overflow: visible !important;
}

.slide .magic-slideshow-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide .magic-slideshow-container .mss-slide-button p { margin: 0 !important; }

.slide .magic-slideshow-container p {
    /*margin: 10px 0px !important;*/
    margin: 0px !important;
}





/*slide-options*/

.body .slide-options {
    height: 100%;
    /*width: 300px;*/
    width: 400px;
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #5F5F5F;
}

.slide-options .slide-options-wrapper {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}






.magic-slideshow-container .mss-content {
    height: 100%;
}

.magic-slideshow-container .mss-content .mss-slide-button,
.magic-slideshow-container .mss-content .mss-slide-button:hover {
    text-decoration: none !important;
    cursor: pointer;
}

.magic-slideshow-container .mss-content .mss-slide-button:visited {
    color: inherit;
}

.body > * {
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    -webkit-user-select: none;
}

.magic-slideshow-container .mss-content .block-wrapper {
    display: inline-block;
    top: 0%;
    left: 0%;
    width: 0;
    height: 0;
    cursor: default;
    line-height: 100%;
}

.magic-slideshow-container .mss-content .block-wrapper.mss-centering-img {
    width: 100%;
    height: 100%;
    display: flex;
}

.mss-centering-img img {
    width: 100%;
    height: 100%;
    max-width: inherit !important;
    max-height: inherit !important;
}

.magic-slideshow-container .mss-content .block-wrapper .outline-block {
    position: absolute;
    outline-width: 0px;
    outline-color: #E9E9E9;
    outline-style: solid;
}

.working-field.outline .magic-slideshow-container .mss-content .block-wrapper .outline-block {
    z-index: 1000 !important;
    outline-width: 1px;
}

/*.magic-slideshow-container .mss-content .block-wrapper .video-border {
    outline-width: 0px;
}*/

.working-field .magic-slideshow-container .mss-content .block-wrapper .outline-block.over {
    z-index: 1000 !important;
    outline-width: 1px;
    outline-color: blue;
    outline-style: solid;
}

.working-field .magic-slideshow-container .mss-content .block-wrapper .over {
    z-index: 1000 !important;
}

.text-angular-editor {
    display: inline-block;
}

.text-angular-toolbar-wrapper {
    width: 100%;
}

.text-angular-toolbar-wrapper .btn-toolbar {
    text-align: center;
    margin: 0px !important;

}
.text-angular-toolbar-wrapper .btn-group {
    margin: 0px !important;
    padding: 10px;
}

.text-angular-toolbar-wrapper .btn-toolbar button {
    padding: 6px 0px;
    font-size: 12px;
}

.text-angular-toolbar-wrapper button[bs-options] {
    padding-left: 7px;
}

/*angular-strap tooltip*/
.select.dropdown-menu {
    overflow-y: auto;
    max-height: 350px;
    border-radius: 2px;
    font-size: 12px;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover {
    background-color: #3e83be;
}


/*либо этот стиль, либо удалить код который учитуют бордер (bootstrap всем ставит boredr-box)*/
.block-wrapper img,
.block-wrapper iframe,
.block-wrapper div {
    box-sizing: content-box;
}



/*inject to slideshow*/
blockquote {
    border: none !important;
    font-size: inherit !important;
}

/*inject to slideshow*/
.MagicSlideshow .mss-content p {
    line-height: 1;
}

.form-group .btn,
.form-control {
    height: auto;
    padding: 5px 6px;
}

.form-control-static { min-height: 0px; }

.form-group hr { display: none; }
.form-group label { font-weight: normal; text-align: left !important; }

.col-sm-12 p.form-control-static {

background: rgba(0,0,0,0.05);
    line-height: 2.5;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    font-weight: bold;
    font-size: 110%;
    padding:0 0 0 15px;

}
.form-group { margin-bottom: 10px; }

fieldset {
    border: 1px solid #ccc;
    padding: 0 1em 0.5em 1em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

legend {
    font-size: 1em !important;
    font-weight: bold !important;
    text-align: left !important;
    width:inherit;
    padding:0 6px;
    border-bottom:none;
    margin-bottom: 1em;
}

.input-group-addon { padding: 3px 5px; }

.slides .slides-wrapper .slides-container .slide-container .slide-min-wrapper,
 .input-group-addon,
 .form-control,
 .btn,
 .ta-toolbar .btn-group button,
 .ta-toolbar .btn-group button:nth-child(2),
 .ta-toolbar .btn-group button:nth-child(2),
 .top-control-panel .mtb-button { border-radius: 0px !important;

    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
 }

 .input-group-addon { border-color:transparent; background: transparent; font-size:inherit;}
 .input-group-addon:first-child { display: block; padding-left:0px; }
 .input-group-addon:first-child:after { /*content: ':';*/ }
 .input-group-addon:last-child { vertical-align: bottom; padding-bottom: 10px; }

 .fieldset .form-group { margin-bottom: 0px; }

.short-field .input-group { max-width: 100px; float: right; width: 100%; }
.additional-options .form-group .col-sm-10 { text-align: right; }
.additional-options .form-group .col-sm-2 { white-space: nowrap;}

div[tab$="animation"] .form-group .col-sm-10 { text-align: right; }
div[tab$="animation"] .form-group .col-sm-2 { white-space: nowrap;}
div[tab$="animation"] .form-group .form-control  { max-width: 100px; display: inline-block;}
div[tab$="animation"] .form-group button  { width: 100px; }

button[placement="bottom-auto"] { text-align: right; border-radius: 4px !important;}

input[type="range"] { -webkit-box-shadow: none !important; box-shadow: none !important; }

.checkbox.form-control { border:none; box-shadow: none; -webkit-transition: none; text-align: left; }
.stretch { width: 100%; }

.top-control-panel button {
    -webkit-box-shadow: none;
    box-shadow: none;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { outline:none; }

.top-control-panel .section #control-button-save,
.top-control-panel .section #close-constructor,
.top-control-panel .section #control-button-download {
    position: relative;
}

.btn[bs-options] {
    white-space: inherit;
}

.input-group .btn[bs-options] {
    width: 100%;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
   opacity: 1;
}

input[type=number][step="0"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type=number][step="0"] {
    -moz-appearance: textfield;
}

div[tab$="animation"] .form-group select,
.form-horizontal select { width: 100px; float: right; }

.tooltip { z-index: 10000000; }
.slide-options .slide-options-wrapper .section {
    background-color: none;
    overflow: hidden;
}

.slide-options .slide-options-wrapper .section.open {
    background-color: rgb(200, 200, 200);
}

.slide-options .slide-options-wrapper .section .button {
    position: relative;
    width: 100%;
    height: 30px;
    text-align: center;
    border: 1px solid;
    line-height: 100%;
    vertical-align: middle;
    cursor: pointer;
    background: linear-gradient(to bottom, transparent, #7DC01B);
}

.slide-options .slide-options-wrapper .section .button.inversion {
    background: linear-gradient(to bottom, #7DC01B, transparent);
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}

.slide-options .slide-options-wrapper .section .button:hover {
    background-color: rgb(200, 200, 200);
}

.slide-options .slide-options-wrapper .section .button:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.slide-options .slide-options-wrapper .section .content .block-title {
    margin-top: 20px;
}

.slide-options .slide-options-wrapper .section .content .block-title span {
    margin-left: 15px;
    color: #424242;
}

.slide-options .slide-options-wrapper .section .content .block-title hr {
    margin-top: 4px;
}


/*section contents*/
.slide-options .slide-options-wrapper .section .content .one-line {
    padding: 5px;
    position: relative;
}

.slide-options .slide-options-wrapper .section .content .one-line .block-opt {
    position: relative;
    display: inline-block;
    width: 49%;
    box-sizing: border-box;
}

.slide-options .slide-options-wrapper .section .content .one-line .block-opt select,
.slide-options .slide-options-wrapper .section .content .one-line .block-opt input {
    width: 100%;
    box-sizing: border-box;
}


/*additional-options*/
.slide-options .slide-options-wrapper .additional-options .section .content.textarea {
    line-height: 100%;
    font-size: 0px;
}
.slide-options .slide-options-wrapper .additional-options .section .content textarea {
    position: relative;
    width: 100%;
    height: 200px;
    resize: none;
    box-sizing: border-box;
}

.slide-options .slide-options-wrapper .additional-options .section .content .block-opt.sign input {
    width: 85%;
}

.slide-options .slide-options-wrapper .additional-options .section .content .block-opt .picker {
    width: 100%;
}
.magic-slideshow-container .mss-content .auxiliary-panel {
    display: inline-block;
    position: absolute;
    z-index: 10000000;
    box-shadow: 0 0 15px #3e83be;
    border: 1px solid #3e83be;
    /*border: 1px dotted white;*/
    width: 10%;
    height: 10%;
    box-sizing: border-box;
}
.magic-slideshow-container .mss-content .auxiliary-panel:hover {
    cursor: pointer;
}

.magic-slideshow-container .mss-content .auxiliary-panel .control {
    position: absolute;
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: blue;
    border: 1px solid white;
}

.magic-slideshow-container .mss-content .auxiliary-panel .control:hover {
    /*border: 2px solid blue;*/
}

.magic-slideshow-container .mss-content .auxiliary-panel .control.top,
.magic-slideshow-container .mss-content .auxiliary-panel .control.bottom {
    left: 50%;
    margin-left: -5px;
}

.magic-slideshow-container .mss-content .auxiliary-panel .control.left,
.magic-slideshow-container .mss-content .auxiliary-panel .control.right {
    top: 50%;
    margin-top: -5px;
}

.magic-slideshow-container .mss-content .auxiliary-panel .control.top { top: -5px; }
.magic-slideshow-container .mss-content .auxiliary-panel .control.left { left: -5px; }
.magic-slideshow-container .mss-content .auxiliary-panel .control.right { right: -5px; }
.magic-slideshow-container .mss-content .auxiliary-panel .control.bottom { bottom: -5px; }
.magic-slideshow-container .mss-content .auxiliary-panel .control.top-left { top: -5px; left: -5px; }
.magic-slideshow-container .mss-content .auxiliary-panel .control.top-right { top: -5px; right: -5px; }
.magic-slideshow-container .mss-content .auxiliary-panel .control.bottom-left { left: -5px; bottom: -5px; }
.magic-slideshow-container .mss-content .auxiliary-panel .control.bottom-right { right: -5px; bottom: -5px; }


.magic-slideshow-container .mss-content .auxiliary-panel .control.top:hover { cursor: n-resize; }
.magic-slideshow-container .mss-content .auxiliary-panel .control.left:hover { cursor: w-resize; }
.magic-slideshow-container .mss-content .auxiliary-panel .control.right:hover { cursor: e-resize; }
.magic-slideshow-container .mss-content .auxiliary-panel .control.bottom:hover { cursor: s-resize; }
.magic-slideshow-container .mss-content .auxiliary-panel .control.top-left:hover { cursor: nw-resize; }
.magic-slideshow-container .mss-content .auxiliary-panel .control.top-right:hover { cursor: ne-resize; }
.magic-slideshow-container .mss-content .auxiliary-panel .control.bottom-left:hover { cursor: sw-resize; }
.magic-slideshow-container .mss-content .auxiliary-panel .control.bottom-right:hover { cursor: se-resize; }

body.t, body.t .magic-slideshow-container .mss-content .auxiliary-panel { cursor: n-resize !important; }
body.l, body.l .magic-slideshow-container .mss-content .auxiliary-panel { cursor: w-resize !important; }
body.r, body.r .magic-slideshow-container .mss-content .auxiliary-panel { cursor: e-resize !important; }
body.b, body.b .magic-slideshow-container .mss-content .auxiliary-panel { cursor: s-resize !important; }
body.tl, body.tl .magic-slideshow-container .mss-content .auxiliary-panel { cursor: nw-resize !important; }
body.tr, body.tr .magic-slideshow-container .mss-content .auxiliary-panel { cursor: ne-resize !important; }
body.bl, body.bl .magic-slideshow-container .mss-content .auxiliary-panel { cursor: sw-resize !important; }
body.br, body.br .magic-slideshow-container .mss-content .auxiliary-panel { cursor: se-resize !important; }
.loader-window {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 10000000;
    background-color: rgba(255,255,255,.5);
}

.loader-window .spinner {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: auto;
    position: absolute;
    background-color: #3e83be;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}
.slide-options-wrapper,
.editor-slide-options {
    height: 100%;
}

.tabs {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    background-color: none;
    overflow: hidden;
    height: 100%;
}
.tabs .container-tabs {
    position: absolute;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    font-size: 13px;
    z-index: 2;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.tabs .tabs-scroll {
    height: 100%;
    padding-top: 40px;
    font-size: 12px;
    z-index: 1;
    max-width: 100%;
}

.tabs .container-tabs button {
    height: 100%;
    position: relative;
    box-sizing: border-box;
    background-color: #f5f5f5;
    padding: 10px;
    border: none;
    outline: none;
}

.tabs .container-tabs button:hover,
.tabs .container-tabs button.active {
    color: #3e83be;
}

.tabs .container-tabs .tabs-animation-line {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    position: absolute;
}

.tabs .container-tabs .tabs-animation-line .tabs-indicator-line {
    top: 0;
    height: 100%;
    position: relative;
    border-radius: 4px;
    background-color: #3e83be;
    transition: all .3s;
}

.tabs .tabs-scroll > div {
    top: 0;
    left: 0;
    position: relative;
    background: #ffffff;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}

.tabs .content {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    padding:15px;
}

.slide-options .slide-options-wrapper .tabs .content .block-title {
    margin-top: 20px;
}

.slide-options .slide-options-wrapper .tabs .content .block-title span {
    margin-left: 5px;
    color: grey;
}

.slide-options .slide-options-wrapper .tabs .content .block-title-mini span {
    margin-left: 5px;
    color: grey;
}

.slide-options .slide-options-wrapper .tabs .content .block-title hr {
    margin-top: 4px;
    margin-bottom: 0px;
    width: 95%;
    border-top-color: grey;
}


/*tabs contents*/
.slide-options .slide-options-wrapper .tabs .picker {
    /*width: 30px;
    height: 30px;
    cursor: pointer;
    position: relative;
    border-radius: 100%;
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #bebebe;*/
    position: relative;
    display: inline-block;
}

.slide-options .slide-options-wrapper .tabs .picker input {
    max-width: 150px;
    margin-left: 32px;
}

.slide-options .slide-options-wrapper .tabs .picker div {
    top: 0;
    left: 0;
    width: 32px;
    cursor: pointer;
    position: absolute;
    display: inline-block;
    height: 32px;
    border: 1px solid #ccc;
    border-right: none;
}

/*additional-options*/
.editor-block-options,
.slide-options .slide-options-wrapper .additional-options,
.slide-options .slide-options-wrapper .additional-options .tabs {
    height: 100%;
}

.slide-options .slide-options-wrapper .additional-options .tabs .content.textarea {
    line-height: 100%;
    font-size: 0px;
}

.slide-options .slide-options-wrapper .additional-options .tabs .content .block-opt.sign input {
    width: 83%;
}

.slide-options .slide-options-wrapper .tabs .content .one-line .bt-wr {
    margin-top: 10px;
    text-align: center;
}


.slide-options .slide-options-wrapper .tabs .content .slide-bcakground {
    margin: 20px;
}

.slide-options .slide-options-wrapper .tabs .content .one-line.slide-bcakground figure {
    text-align: center;
    padding: 10px;
}

.slide-options .slide-options-wrapper .tabs .content .one-line.slide-bcakground figure img {
    max-width: 100%;
    max-height: 300px;
}

.slide-options .slide-options-wrapper .tabs .content .one-line.slide-bcakground figure figcaption {
    padding-top: 10px;
}
.summernote-form > .form-group {
    margin-bottom: 0;
}

.summernote-container {
    padding: 0px;
    font-size: 14px;
    position: relative;
    width: 385px;
    max-width: 385px;
}

.summernote-container .note-editor {
    margin: 0;
    border: 0 !important;
    border-radius: 0;
    width: 385px;
    max-width: 385px;
}

.summernote-container .note-editor .note-toolbar,
.summernote-container .note-editor .note-statusbar {
    border: 0;
    background-color: #f3f3f3 !important;
}

.summernote-container .note-editor .dropdown-menu {
    left: auto;
    right: 0;
}

.summernote-container .note-fontname .dropdown-menu {
    right: auto;
}

.panel-heading.note-toolbar .note-para .dropdown-menu {
    min-width: 168px !important;
}

.panel-heading.note-toolbar .note-color .dropdown-menu {
    left: 50% !important;
    -wibkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

.modal.link-dialog .form-group {
    margin-left: 0px;
    margin-right: 0px;
}


.summernote-container .modal-content {
    border-radius: 0;
}

.summernote-container .note-toolbar button {
    border-color: #3e83be !important;
}

.summernote-container .note-toolbar button:hover {
    color: #3e83be !important;
}

.summernote-button-form .note-statusbar {
    height: 0px !important;
    display: none;
}

.summernote-button-form .note-editing-area {
    width: 100%;
    display: block !important;
    overflow-y: hidden !important;
    overflow-x: auto !important;
}

.summernote-button-form .note-editable.panel-body {
    white-space: nowrap;
    min-width: 100%;
    overflow: hidden;
}
.body.move {
    cursor: ns-resize !important;
}

.body .control-line:hover {
    cursor: ns-resize;
}

.bottom-content .control-line {
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 20px;
    text-align: center;
    position: absolute;
    display: inline-block;
    background-color: #f5f5f5;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.bottom-content .control-line span {
    top: 50%;
    position: absolute;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.bottom-content .control-line .cl-title {
    left: 5px;
    font-size: 11px;
}

.bottom-content .control-line .cl-control {
    left: 50%;
    width: 50px;
    height: 7px;
    border-width: 0px;
    border-style: solid;
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-color: #aaa;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.bottom-content .control-line:hover .cl-title {
    color: #3e83be;
}

.bottom-content .control-line:hover .cl-control {
    border-color: #3e83be;
}
/*.content-line .wrapper {
    padding: 0px 5px;
}*/
.timeline {
    position: relative;
    height: 100%;
}

.timeline.move {
    cursor: move !important;
    cursor: default;
}

.timeline .tl-time-scale {
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    position: absolute;
    display: inline-block;
}

.timeline .tl-time-scale canvas {
    width: 100%;
    height: 100%;
}

.timeline .tl-container {
    width: 100%;
    height: 100%;
    padding-top: 30px;
    position: relative;
    display: inline-block;
}

.timeline .tl-container .tl-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
    overflow-x: hidden;
    overflow-y: scroll;
}
.timeline .tl-container .tl-wrapper .tl-wrapper-without-scroll {
   padding: 0px 5px;
   display: inline-block;
   width: 100%;
   position: relative;
}

.tl-wrapper .tl-content {
    width: 100%;
    position: relative;
    display: inline-block;
}

.tl-wrapper .tl-content .tl-line {
    width: 100%;
    height: 40px;
    line-height: 100%;
    position: relative;
    display: inline-block;
}

.tl-wrapper .tl-content .tl-line:hover,
.tl-wrapper .tl-content .tl-line.active {
    background-color: #f3f3f3;
}

.tl-wrapper .tl-content .tl-line:after {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.tl-wrapper .tl-content .tl-line .tl-line-scale {
    width: 100%;
    height: 7px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}


.tl-wrapper .tl-content .tl-line .tl-line-scale .tl-control-line {
    position: absolute;
    height: 100%;
    z-index: 2;
}

.tl-wrapper .tl-content .tl-line .tl-line-scale .tl-control-line-left {
    background: linear-gradient( to left, #88c5f9, #3e83be);
}

.tl-wrapper .tl-content .tl-line .tl-line-scale .tl-control-line-right {
    background: linear-gradient( to left, #3e83be, #88c5f9);
}
.tl-wrapper .tl-content .tl-line .tl-line-scale .tl-control-line:hover {
    cursor: pointer;
}

.tl-wrapper .tl-content .tl-line .tl-line-scale .tl-control-line .tl-control-line-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.tl-control-line-wrapper .tl-stick-left,
.tl-control-line-wrapper .tl-stick-right {
    top: -5px;
    position: absolute;
    height: 15px;
    width: 1px;
    background-color: #4f4f4f;
    z-index: 1;
}

.tl-control-line-wrapper .tl-stick-left {
    left: 0;
}

.tl-control-line-wrapper .tl-stick-right {
    right: 0;
}

.tl-control-line-wrapper .tl-mouse-control-left,
.tl-control-line-wrapper .tl-mouse-control-right {
    cursor: default;
    position: absolute;
    border: 1px solid #4f4f4f;
    border-radius: 50%;
    width: 9px;
    height: 9px;
    background-color: #3e83be;
    z-index: 2;
}
.tl-control-line-wrapper .tl-mouse-control-left:hover,
.tl-control-line-wrapper .tl-mouse-control-right:hover {
    cursor: col-resize;
}
.bottom-content.col-move,
.tl-wrapper .tl-content .tl-line .tl-line-scale .tl-control-line.col-move {
    cursor: col-resize !important;
}

.tl-control-line-wrapper .tl-mouse-control-left {
    top: -12px;
    left: -4.5px;
}

.tl-control-line-wrapper .tl-mouse-control-right {
    top: -12px;
    right: -4.5px;
}

.tl-wrapper .tl-content .tl-line .tl-line-scale .tl-control-line.tl-center-line {
    background-color: #ff7c7c;
    z-index: 1;
    opacity: 0.5;
}
.list-of-blocks {
    overflow: hidden;
}

.list-of-blocks .lb-one-block {
    position: relative;
    height: 25px;
    line-height: 25px;
    padding-left: 5px;
    cursor: pointer;
    color: grey;
}

/*.list-of-blocks > div:nth-child(2n) {
    background-color: #f5f5f5;
}*/

.list-of-blocks .lb-one-block:hover {
    background-color: #f5f5f5;
}

.list-of-blocks .lb-one-block span {
    vertical-align: middle;
}

.list-of-blocks .lb-one-block .lb-signs {
    float: right;
    height: 100%;
}

.list-of-blocks .lb-one-block span.lb-sign {
    margin-right: 5px;
}
.control-panel-blocks {
    position: relative;
    height: 100%;
    display: inline-block;
    box-sizing: border-box;
    overflow: hidden;
}


/*modal window*/

body .c-main-field,
.c-main-field .c-background-field {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

body .c-main-field {
    z-index: 1000000;
    position: absolute;
}

.c-main-field .c-background-field {
    background-color: rgba(0,0,0,0.5);
    z-index: 1;
    position: absolute;
}

.c-main-field .c-working-field {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 70%;
    height: 80%;
    overflow: hidden;
    z-index: 2;
    position: absolute;
    background-color: white;
    border: 1px solid #bebebe;
}


.c-main-field .c-working-field #c-top-field {
    position: relative;
    height: 85px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index: 1;
}

.c-main-field .c-working-field #c-top-field .c-title {
    font-size: 20px;
    padding: 15px;
    display: block;
}

.c-main-field .c-working-field #c-top-field #c-tabs {
    left: 0;
    bottom: 0;
    position: absolute;
}

.c-main-field .c-working-field #c-top-field #c-tabs button {
    margin-left: 10px;
    height: 40px;
    border-style: solid;
    border-color: white;
    background-color: white;
    border-width: 2px;

    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    user-select: none;
}

.c-main-field .c-working-field #c-top-field #c-tabs button:focus {
    outline: none;
}


.c-main-field .c-working-field #c-top-field #c-tabs button:hover {
    border-bottom-color: #3e83be;
}

.c-main-field .c-working-field #c-top-field #c-tabs button.active {
    border-bottom-color: #3e83be;
    color:#3e83be;
}

.c-main-field .c-working-field #c-center-field {
    position: relative;
    height: 100%;
    height: calc(100% - 145px);
}

.c-main-field .c-working-field #c-center-field .c-content-img,
.c-main-field .c-working-field #c-center-field .c-content-video,
.c-main-field .c-working-field #c-center-field .c-content-video .c-insertUrl,
.c-main-field .c-working-field #c-center-field .c-content-img .c-upload,
.c-main-field .c-working-field #c-center-field .c-content-img .c-insertUrl {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
}

.c-main-field .c-working-field #c-center-field .c-content-img,
.c-main-field .c-working-field #c-center-field .c-content-video {
    padding: 20px;
    overflow: hidden;
}

.c-main-field .c-working-field #c-center-field .c-content-img .c-upload {
    border: 5px dashed #bebebe;
    text-align: left;
}

.c-main-field .c-working-field #c-center-field .c-content-img .c-upload .c-drop-container {
    text-align: center;
    font-size: 25px;
    color: #bebebe;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10;
}

.c-main-field .c-working-field #c-center-field .c-content-img .c-upload input {
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    width: 0%;
    height: 0%;
    position: absolute;
    letter-spacing: 10em;
    display: inline-block;
}

.c-main-field .c-working-field #c-center-field .c-content-img .c-insertUrl,
.c-main-field .c-working-field #c-center-field .c-content-video .c-insertUrl {
    padding-top: 50px;
}

.c-main-field .c-working-field #c-center-field .c-content-img .c-insertUrl .c-display-url,
.c-main-field .c-working-field #c-center-field .c-content-video .c-insertUrl .c-display-url {
    position: absolute;
    width: 100%;
    top: 0;
}

.c-main-field .c-working-field #c-center-field .c-content-img .c-insertUrl .c-display-img,
.c-main-field .c-working-field #c-center-field .c-content-video .c-insertUrl .c-display-video {
    height: 100%;
    text-align: center;
}

.c-main-field .c-working-field #c-center-field .c-content-img .c-insertUrl .c-display-img:after,
.c-main-field .c-working-field #c-center-field .c-content-video .c-insertUrl .c-display-video:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.c-main-field .c-working-field #c-center-field .c-content-img .c-insertUrl .c-display-img  img {
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
}

.c-main-field .c-working-field #c-center-field .c-content-video .c-insertUrl .c-display-video  iframe {
    vertical-align: middle;
    max-height: 100%;
}

.c-main-field .c-working-field #c-center-field .c-content-img .c-insertUrl .c-display-url label,
.c-main-field .c-working-field #c-center-field .c-content-video .c-insertUrl .c-display-url label {
    font-size: 15px;
    font-weight: 100;
}




.c-main-field .c-working-field #c-bottom-field {
    position: relative;
    border-top: 1px solid #bebebe;
    height: 60px;
}

.c-main-field .c-working-field #c-bottom-field .c-controls {
    right: 0px;
    bottom: 0px;
    position: absolute;
    padding: 10px;
}

.c-main-field .c-working-field #c-bottom-field button {
    margin-right: 10px;
}



/*loader*/
.c-main-field .c-working-field #c-center-field .c-content-img .c-insertUrl .c-display-url .loader,
.c-main-field .c-working-field #c-center-field .c-content-video .c-insertUrl .c-display-url .loader {
    top: -2px;
    position: absolute;
    display: inline-block;
}

.spinner {
    width: 50px;
    height: 30px;
    text-align: center;
    font-size: 10px;
}

.spinner > div {
    height: 100%;
    width: 6px;
    display: inline-block;

    background-color: #bebebe;
    margin-right: 2px;

    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}
.one-line.order {
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 0px;
    text-align: center;
    display: inline-block;
    position: relative;
    width: 100%;
}
.one-line.order button {
    position: relative;
    line-height: 100%;
    padding: 7px;
    border-radius: 2px;
    margin: 0 9px;
}

.one-line.order button img {
    position: relative;
    width: 15px;
    height: 15px;
}
.global-menu,
.global-menu .gm-curtain {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.global-menu {
    z-index: 1000;
}

.global-menu .gm-curtain {
    z-index: 1;
    background-color: rgba(0,0,0,0.5);
}


.global-menu .gm-wrapper {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 85%;
    height: 95%;
    margin: auto;
    z-index: 2;
    position: absolute;
    background-color: #ffffff;
    padding: 10px;
}

.global-menu .gm-container {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.global-menu .gm-container .gm-scroll {
    top: 0;
    left: 0;
    width: 100%;
    position: relative;
}

.global-menu > button {
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    z-index: 10000;
    position: absolute;
    margin-top: 5px;
    margin-right: 5px;
    color: #ffffff;
    font-size: 20px;
    border: none !important;
}

.global-menu > button:hover {
    /*color: #3e83be;*/
    text-shadow: 0px 0px 25px #ffffff, 0 0 1em #ffffff;
}

.global-menu > button i {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%) rotateZ(45deg);
}

.global-menu .gm-container fieldset {
    border: 1px solid #ccc !important;
    padding: 0 10px 0px 20px !important;
    margin: 0 0 1.5em 0 !important;
    -moz-border-radius: 2px / 2px;
    border-radius: 2px / 2px;
    min-width: 0;
}

.global-menu .gm-container legend {
    width: inherit;
    font-weight: bold;
    padding: 0 5px;
    border-bottom: none;
    font-size: 14px;
    color: #777;
    margin-bottom: 8px;
}

.global-menu .gm-container legend:first-letter {
    text-transform: capitalize;
}

.global-menu label { white-space: nowrap; }
.global-menu .col-sm-9 { text-align: right; }
.global-menu .help-block { font-size:12px; display: block; clear: both; }
.global-menu .col-sm-9 > input.form-control,
.global-menu .col-sm-9 > button[placement="bottom-auto"],
.global-menu .input-group { width: 100px; float: right; }

button[placement="bottom-auto"] { text-align: left; }
button[placement="bottom-auto"] .caret { float: right; margin: 8px 4px; }

.global-menu .form-group:after { 
    border-bottom: 1px solid rgba(0,0,0,0.1);
    height: 1px;
    line-height: 1px;
    width: 100%;
    margin-left: -5px;
}
.global-menu .form-group:last-child:after { border:none; }
.global-menu .form-group:last-child { margin-bottom: 0px; }
.global-menu .input-group-addon  { display: none; }.slideshow-preview {
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    z-index: 0;
    position: absolute;
    background-color: white;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    visibility: hidden;
}

.slideshow-preview.sp-show {
    opacity: 1;
    z-index: 1000000;
    visibility: visible;
}

.slideshow-preview .MagicSlideshow.sp-border {
    border: 1px solid #DCDCDC;
}

.slideshow-preview .sp-wrapper {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position:  relative;
    display: inline-block;
}

.sp-wrapper .sp-slideshow-wrapper-size {
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
    display: inline-block;
}

.sp-wrapper .sp-slideshow-center {
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
}

.sp-wrapper .sp-padding {
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    padding: 10px 60px;
    display: inline-block;
}


/*buttons*/
.sp-wrapper .sp-control {
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    position: absolute;
}

.sp-control .sp-control-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.sp-control .sp-control-wrapper > button {
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    outline: 0;
    position: relative;
    width: 60px;
    height: 60px;
    z-index: 100;

    color: #bbb;
    font: normal 0/1 'magicarrows';
    cursor: pointer;
    background-repeat: no-repeat;
    background-color: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    text-transform: none !important;
    text-align: center;
    speak: none;
    -webkit-font-smoothing: antialiased;

    font-size: 28px;
    transform: rotateZ(45deg);
    outline: none;
}

.sp-control-wrapper > button:hover,
.sp-control-wrapper > button:active {
    box-shadow: none !important;
    color: #3e83be;
}
.color-picker {
    display: inline-block;
    position: absolute;
    width: 220px;
    background-color: white;
    top: 0px;
    left: 0px;
    z-index: 1000000;
    position: absolute;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

.color-picker .control-panel {
    height: 0px;
    background: linear-gradient(to bottom, #D6FCF6, #9DB8B4);
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid #7FB1AEFF;
    overflow: hidden;
}

.color-picker .control-panel.show {
    height: 15px !important;
}

.color-picker .control-panel .close-button {
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    outline: 0;
    position: absolute;
    width: 15px;
    height: 15px;
    z-index: 100;

    color: rgb(11, 103, 84);
    line-height: 1;
    cursor: pointer;
    background-repeat: no-repeat;
    background-color: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    text-transform: none !important;
    text-align: center;
    speak: none;
    -webkit-font-smoothing: antialiased;

    font-size: 14px;
}


.color-picker .control-panel .close-button:before {
    -webkit-transition: opacity .25s;
    transition: opacity .25s;
    opacity: .6;
}
.color-picker .control-panel .close-button:hover:before {
    opacity: 1;
}

.color-picker .control-panel .close-button:before {
    content: "\02717";
}



.color-picker .main-panel {
    overflow: hidden;
}

.color-picker .text {
    display: inline-block;
    margin-left: 10px;
}

 .color-picker .block-picker {
    background-color:red;
    position: relative;
    height: 180px;
    width: 220px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.color-picker .block-picker img {
    width: 220px;
    height: 180px;
}

.color-picker .controls-wrapper-picker {
    position: relative;
    font-size: 0;
}

.color-picker .controls-wrapper-picker .out-color-wrapper {
    z-index: 1;
    width: 40px;
    height: 60px;
    position: relative;
    vertical-align: top;
    display: inline-block;
}

.color-picker .out-color {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    margin: auto;
    overflow: hidden;
    position: absolute;
    border-radius: 100%;
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #bebebe;
}

.color-picker .out-color > div {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.color-picker .out-color .bg-img {
    background-repeat: repeat-y;
}


.color-picker .controls-wrapper-picker .lines-picker {
    z-index: 2;
    width: 180px;
    height: 60px;
    display: inline-block;
    position: relative;
}

.color-picker .line-wrapper {
    width: 100%;
    height: 30px;
    position: relative;
}

.color-picker .alpha-piker {
    top: 6px;
    height: 14px;
    position: relative;
}

.color-picker .cAlpha {
    width: 165px;
    height: 14px;
    position: relative;
    cursor: pointer;
}

.color-picker .cAlpha > * {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1
}


.color-picker .line-piker {
    top: 10px;
    cursor: pointer;
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.color-picker .circle-control {
    position: absolute;
    top: -1px;
    margin-left: -8px;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background-color: white;
    border-width: 1px;
    border-style: solid;
    border-color: #bebebe;
    box-sizing: border-box;
    z-index: 10;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.color-picker .circle {
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    cursor: default;
    border-radius: 50%;
    position: absolute;
    background-color: black;
    border: 1px solid white;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; 
}

.control-panel .close-picker {
    position: absolute;
    right: 0px;
}
.aInfobar {
    opacity: 1;
    top : -100px;
    right: 50%;
    position: absolute;
    display: inline-block;
    background-color: #ffffff;
    z-index: 10000000;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border: 1px solid #3e83be;
    -webkit-transform; translateX(-50%);
    transform; translateX(-50%);
    color: #3e83be;
}

.aInfobar .aInfobar-control {
    top: 0;
    right: 0;
    padding: 0;
    opacity: 0.4;
    border: none;
    font-size: 10px;
    position: absolute;
    outline: none !important;
    background-color: transparent;
    padding: 2px;
    color: #3e83be;
}

.aInfobar .aInfobar-control:hover {
    opacity: 1;
}
.a-modal-window {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 9999999;
    position: absolute;
}

.a-modal-window.show {
    display: inline-block !important;
    background-color: rgba(0,0,0,0.2);
}

.a-modal-window .view-wrapper {
    top: 50%;
    left: 50%;
    padding: 20px;
    color: #3e83be;
    position: absolute;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.a-modal-window .view-wrapper .text-container {
    top: 0;
    left: 0;
    width: 100%;
    padding: 5px;
    margin-bottom: 25px;
    display: inline-block;
    color: rgb(51, 51, 51);
}

.a-modal-window .view-wrapper .controlls-wrapper {
}

.a-modal-window .view-wrapper .controlls-wrapper button {
    float: right;
    font-size: 12px;
    border-radius: 0;
}
