/*
*  Exercise questions canvas editor
*  Basic styles
* */

/* Contextual menú
----------------------------------*/

#canvas-parent .contextual-menu{
  width: 12rem;
  height: 4.5rem;
  background-color: #f4f4f4;
  display: block;
  color: #333;
  border: 1px solid #aaa;
  box-shadow: 2px 2px 2px #999;
  border-radius: 0.2rem;
  list-style: none;
  position: absolute;
}

#canvas-parent .contextual-menu.off{
  display:none;
}

#canvas-parent .contextual-menu .menu-item{
  height: 18px;
  font-size: 14px;
  font-weight: 200;
  cursor: pointer;
}

#canvas-parent .contextual-menu .menu-item:hover,
#canvas-parent .contextual-menu .menu-item:active{
  color: #000;
  font-weight: 500;
}


/* Canvas custom icon fonts
----------------------------------*/

@font-face {
  font-family: 'milton-canvas';
  src: url('../fonts/milton-canvas.eot?75637995');
  src: url('../fonts/milton-canvas.eot?75637995#iefix') format('embedded-opentype'),
       url('../fonts/milton-canvas.woff2?75637995') format('woff2'),
       url('../fonts/milton-canvas.woff?75637995') format('woff'),
       url('../fonts/milton-canvas.ttf?75637995') format('truetype'),
       url('../fonts/milton-canvas.svg?75637995#milton-canvas') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'milton-canvas';
    src: url('../font/milton-canvas.svg?75637995#milton-canvas') format('svg');
  }
}


 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "milton-canvas";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-input-write:before { content: '\e800'; } /* '' */
.icon-text:before { content: '\e801'; } /* '' */
.icon-dragdrop:before { content: '\e802'; } /* '' */
.icon-check:before { content: '\e803'; } /* '' */
.icon-image:before { content: '\e804'; } /* '' */
.icon-fill-gap:before { content: '\e805'; } /* '' */
.icon-close:before { content: '\e806'; } /* '' */
.icon-cog-alt:before { content: '\e807'; } /* '' */
.icon-cog:before { content: '\e808'; } /* '' */
.icon-wrench:before { content: '\e809'; } /* '' */
.icon-check-empty:before { content: '\f096'; } /* '' */
.icon-checkfull:before { content: '\f14a'; } /* '' */
.icon-audio:before { content: '\f1c7'; } /* '' */
.icon-video:before { content: '\f1c8'; } /* '' */
.icon-dragdrop2:before { content: '\f2d2'; } /* '' */


/* Canvas icons elements
--------------------------------------------------------------------*/

#canvas-section .glyphicon-font,
#canvas-section .icon-text{
  color: #7200da;
}

#canvas-section .glyphicon-picture{
  color: #f9c00c;
}

#canvas-section .glyphicon-tasks,
#canvas-section .icon-input-write{
  color: #f26d5b;
}

#canvas-section .glyphicon-move,
#canvas-section .icon-dragdrop2{
  color: #f9320c;
}

#canvas-section .glyphicon-play-circle,
#canvas-section .icon-audio{
  color: #00b9f1;
}

#canvas-section .glyphicon-plus-sign,
#canvas-section .icon-video{
  color: #AACD6E;
}

#canvas-section .glyphicon-minus-sign,
#canvas-section .icon-check,
#canvas-section .icon-close{
  color: #F16B6F;
}

#canvas-section .glyphicon-minus{
  color: #77919d;
}

#canvas-section .glyphicon-th-large{
  color: #6d819c;
  margin-left: 5px;
}

#canvas-section .icon-close{
  font-size: 16px;
}

#canvas-section .glyphicon-text-background{
  color: #fbb008;
  font-size: 20px;
}

#canvas-section .glyphicon-pencil{
  color: #4ea1d3;
  margin: 0px 5px;
}

/* Canvas section ( add/remove elements menu, canvas content ... )
----------------------------------*/
#canvas-section .canvas-messages{
  border: 1px solid #F16B6F;
  padding: 10px;
  margin: 0px 0px 10px 0px;
  text-align: center;
}

#canvas-section .canvas-messages p{
  color: #F16B6F;
  font-size: 18px;
  letter-spacing: 1px;
}

#canvas-section .c-canvas-elements{
  border-radius: 10px;
  padding: 10px;
  box-shadow: rgba(52, 63, 75, 0.15) 0px 2px 6px 0px;
  margin: 0px 0px 12px 0px;
  background: white;
}

/* Custom checkbox class (c-custom-check) for checkboxes with label∫ */
#canvas-section .c-custom-check {
  cursor: pointer;
	position: absolute;
	clip: rect(0,0,0,0);
}

#canvas-section .c-custom-check + label::before {
  cursor: pointer;
  content: '\a0';
  display: inline-block;
  vertical-align: .2em;
  width: 18px;
  height: 18px;
  margin-right: 0.2em;
  border-radius: .2em;
  background: #d7dbde;
  text-indent: 0.25em;
  line-height: 0.70;
  font-size: 20px;
}

#canvas-section .c-custom-check:checked + label::before {
  cursor: pointer;
	content: '\2714';
  color: green;
  background: #d7dbde;
}

#canvas-section .c-custom-check:focus + label::before {
	box-shadow: 0 0 .1em .1em #58a;
}

#canvas-section .c-canvas-elements .c-add-canvas-elements .c-add-canvas{
  display: table-cell;
  padding: 0;
}

#canvas-section .c-canvas-elements .c-add-canvas-elements .c-canvas-size span{
  color: #566270;
}

#canvas-section .c-canvas-elements .c-add-canvas-elements .c-add-canvas i{
  cursor: pointer;
  padding: 2px;
  font-size: 22px;
}

#canvas-section .c-canvas-elements .c-add-canvas-elements .c-add-canvas .icon-title{
  font-size: 25px;
  vertical-align: bottom;
}

#canvas-section .c-canvas-elements .c-add-canvas-elements .c-canvas-size input[type='number']{
  border-radius: 5px;
  border: none;
  background: transparent;
  border: 2px solid #b5b8ba;
  color: #b5b8ba;
  margin: 0px 5px;
  padding: 1px 10px;
  width: 70px;
}

#canvas-section .c-canvas-elements .c-remove-canvas-elements{
  padding: 10px 0px;
  padding-left: 32px;
  display: inline-flex;
  align-items: flex-end;
}

#canvas-section .c-canvas-elements .c-remove-canvas-elements .icon-title{
  margin-right: -30px;
  font-size: 25px;
}

#canvas-section .c-canvas-elements .c-remove-canvas-elements ol{
  list-style: none;
  display: inline-flex;
  margin: 0px;
}

#canvas-section .c-canvas-elements .c-remove-canvas-elements ol li{
  padding: 0px 5px;
  border: 1px solid #3C3530;
  border-radius: 5px;
  margin-right: 5px;
}

#canvas-section .c-canvas-elements .c-remove-canvas-elements ol li button{
  color: #F16B6F;
  background: transparent;
  border: none;
  font-size: 11px;
  margin: 0px -5px;
}


/* Canvas element properties panel section ( font-size, bold, italic, align text ... )
--------------------------------------------------------------------*/

#canvas-property-panel{
  color: #60636b;
  border: 1px solid #b6b6b6;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  height: auto;
  padding: 1px;
  background: white;
}

#canvas-property-panel h4{
  font-size: 14px;
  background: #e6ebef;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding: 10px;
  padding: 10px;
  margin: 4px;
}

#canvas-property-panel .no-padding-content{
  padding: 0px;
}

#canvas-property-panel input[type='number'],
#canvas-property-panel input[type='text']{
  background: transparent;
  border: 2px solid #b5b8ba;
  color: #96989a;
}

#canvas-property-panel input[type='number']{
  border-radius: 5px;
  margin: 0px 5px;
  padding: 1px 10px;
  width: 70px;
}

#canvas-property-panel input[type='text']{
  border-radius: 5px;
  margin: 0px 5px;
  padding: 1px 10px;
  min-width: 120px;
  width: 100%;
}

#canvas-property-panel input[type='text']#el-link{
  width: 100%;
}

#canvas-property-panel .content-text-weight{
  border-bottom: 1px solid #C5C6B6;
  padding: 10px 50px;
}

#canvas-property-panel .content-canvas-sizes{
  padding: 0px;
  margin: 15px 0px;
}

#canvas-property-panel .content-canvas-othero{
  padding:0;
}

#canvas-property-panel .content-canvas-result{
  padding: 15px 0px;
}

#canvas-property-panel .c-audio-canvas audio{
  margin: 15px;
}

#canvas-property-panel .c-audio-canvas .audio-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

#canvas-property-panel .content-canvas-sizes span,
#canvas-property-panel .content-canvas-othero span{
  width: 70px;
}

#canvas-property-panel .content-canvas-sizes div,
#canvas-property-panel .content-canvas-othero div{
  display: flex;
}

#canvas-property-panel .c-general-properties .c-general-content{
  padding: 5px 15px;
}

#canvas-property-panel .c-general-properties .c-general-content .c-input-name{
  display: flex;
  padding: 12px;
}

#canvas-property-panel .c-general-properties .c-general-content .c-el-visible{
  cursor: pointer;
}

#canvas-property-panel .canvas-text-properties,
#canvas-property-panel .c-general-properties,
#canvas-property-panel .c-drag-properties{
  padding: 0px;
}

#canvas-property-panel .canvas-text-properties .c-text-properties-block{
  color: #3C3530;
  font-size: 14px;
  font-family: 'Roboto';
  margin-bottom: 10px;
  padding: 0;
}

#canvas-property-panel .canvas-text-properties .suggested-write{
  margin: 10px 0px;
}

#canvas-property-panel .canvas-text-properties .suggested-write p{
  font-weight: 500;
  width: 100%;
}

#canvas-property-panel .canvas-text-properties textarea{
  height: 150px;
  padding: 0;
}

#canvas-property-panel .canvas-text-properties.long-properties .c-title{
  font-size: 12px;
}

#canvas-property-panel .c-title{
  color: #566270;
  padding: 0px 10px 0px 0px;
  width: 120px;
}

#canvas-property-panel .canvas-text-properties .c-text-properties-block div{
  display: flex;
  align-items: center;
}

#canvas-property-panel .canvas-text-properties .c-text-properties-block select{
  color: #7e7f7f;
  font-size: 14px;
  font-family: 'Roboto';
  height: 25px;
  min-width: 100px;
  background: white;
}

#canvas-property-panel .canvas-text-properties .c-text-properties-block input[type='color']{
  border: none;
  height: 30px;
  padding: 0;
  width: 50px;
}

#canvas-property-panel .canvas-text-properties .c-text-properties-block .c-font-wrap{
  margin: 0px 0px 20px 0px;
}

#canvas-property-panel .canvas-text-properties .c-text-properties-block .glyphicon{
  padding-right: 4px;
}

#canvas-property-panel .canvas-text-properties .c-text-properties-block .g-properties-info{
  border: 1px solid red;
  margin: 10px 5%;
  padding: 10px;
  width: 90%;
  letter-spacing: 1px;
}

#canvas-property-panel .canvas-text-properties .c-fill-select,
#canvas-property-panel .canvas-text-properties .c-split-word{
  padding: 10px 15px;
}

#canvas-property-panel .canvas-text-properties .c-fill-select .c-title{
  /* width: 100px; */
}

#canvas-property-panel .c-canvas-text-editor{
  margin-bottom: -5px;
  padding: 0;
}

#canvas-property-panel .c-canvas-text-editor textarea{
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid #ccc;
  min-height: 300px;
  font-size: 16px;
  color: #282c37;
  font-family: 'Roboto';
  padding: 10px 5px;
  width: 100%;
}

#canvas-property-panel .c-checkbox-content .checkbox-op{
  display: flex;
  margin: 8px 0px;
}

#canvas-property-panel .c-checkbox-content .checkbox-op span{
  padding: 0px 10px 0px 0px;
}

#canvas-property-panel .c-checkbox-content .c-add-checkbox-b{
  display: flex;
  justify-content: center;
  padding: 25px 0px;
}

#canvas-property-panel #c-checkbox-list{
  padding: 0;
}

#canvas-property-panel .c-checkbox-row{
  padding: 5px 20px;
}

#canvas-property-panel .c-group-box{
  padding: 10px;
}

#canvas-property-panel .c-group-box .c-group-element{
  display: flex;
  flex-direction: column;
}

#canvas-property-panel .c-group-box .c-group-element .box-options{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
}

#canvas-property-panel .c-group-box .c-group-element #delete-group-box{
  cursor: pointer;
  color: #F16B6F;
  font-size: 16px;
}

#canvas-property-panel .c-group-box .c-group-element span{
  padding: 0px 0px 5px 0px;
}

#canvas-property-panel .c-group-box .c-group-element .glyphicon-plus-sign{
  cursor: pointer;
  font-size: 18px;
  margin: 4px;
}

#canvas-property-panel .c-add-group-box{
  margin: 20px 0px;
}

#canvas-property-panel .c-video-canvas{
  padding-bottom: 15px;
}

#canvas-property-panel .c-video-canvas .c-video-url{
  margin: 10px 25px;
}

#canvas-property-panel .c-video-canvas .c-video-url input[type=text]{
  width: 85%;
}

#canvas-property-panel .all-answers-valid{
  padding: 10px 30px;
}

#canvas-property-panel .matching-options{
  margin: 0;
  padding: 0;
}


/* Canvas elements sidebar
----------------------------------*/

#canvas-section .c-canvas-elements-list{
  background: #FFFFF2;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: rgba(52, 63, 75, 0.15) 0px 2px 6px 0px;
  min-height: 600px;
  padding: 15px 5px;
}

#canvas-section .c-canvas-elements-list h6{
  background: #E0E3DA;
  margin-top: -10px;
  padding: 10px;
  border-bottom: 1px solid #566270;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #566270;
  font-size: 14px;
  text-align: center;
}

#canvas-section #canvas-elements-list li{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-left: -40px;
  margin-bottom: 8px;
  padding: 8px;
  background: white;
}

#canvas-section #canvas-elements-list .element-selector.active-element span{
  font-weight: bold;
  color: #52616a;
}

#canvas-section #canvas-elements-list .element-selector span{
  color: #b4bfc5;
  cursor: pointer;
  text-transform: capitalize;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
}

#canvas-section #canvas-elements-list .c-element-actions i{
  cursor: pointer;
  padding: 0px 1px;
}


/* Canvas properties buttons
----------------------------------*/

#canvas-section .btn-k-canvas-default{
  background: #52616a;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  padding: 8px;
  font-size: 12px;
  letter-spacing: 0.4px;
}


/* Canvas drag and drop modal
----------------------------------*/

#ddModal .modal-body p{
  text-align: center;
  color: #566270;
}


/*  Custom checkboxes  */

#canvas-section input[type='checkbox']{
  cursor: pointer;
  margin: 5px;
}

#canvas-section input[type='checkbox']:after{
  line-height: 1.5em;
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-top: -4px;
  margin-left: -4px;
  border: 2px solid #ccc;
  border-radius: 0.25em;
  background: white;
}

#canvas-section input[type='checkbox']:checked:after{
  width: 20px;
  height: 20px;
  content: "\2714";
  color: #7a944e;
  border: 2px solid #ccc;
  background: white;
  padding: 0px 2px;
}