body {
}

html,
body {
    margin: 0;
    overflow: hidden;
    height: 100%;
}

/* Scale canvas with resize attribute to full size */
canvas[resize] {
    width: 100%;
    height: 100%;
}

.img-container {
    position: relative;
}

.image-markup-canvas {
    cursor: url(../img/red-pen.png) 14 50, auto;
}

.icon-tools {font-weight: bold; }
.icon-text { background-image: url(../contextMenu/images/text.png); }
.icon-rect { background-image: url(../contextMenu/images/rect.png); }
.icon-blackpen { background-image: url(../contextMenu/images/blackpen.png); }
.icon-redpen { background-image: url(../contextMenu/images/redpen.png); }
.icon-greenpen { background-image: url(../contextMenu/images/greenpen.png); }
.icon-bluepen { background-image: url(../contextMenu/images/bluepen.png); }
.icon-yellowpen { background-image: url(../contextMenu/images/yellowpen.png); }



/* .icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; } */

.icon-undo { background-image: url(../contextMenu/images/undo.png); }
.icon-redo { background-image: url(../contextMenu/images/redo.png); }
.icon-erase { background-image: url(../contextMenu/images/erase.png); }


/* .context-menu-item.icon-tools {font-weight: bold; }
.context-menu-item.icon-text { background-image: url(../contextMenu/images/text.png); }
.context-menu-item.icon-rect { background-image: url(tool-btn../contextMenu/images/rect.png); }
.context-menu-item.icon-blackpen { background-image: url(../contextMenu/images/blackpen.png); }
.context-menu-item.icon-redpen { background-image: url(../contextMenu/images/redpen.png); }
.context-menu-item.icon-greenpen { background-image: url(../contextMenu/images/greenpen.png); }
.context-menu-item.icon-bluepen { background-image: url(../contextMenu/images/bluepen.png); }
.context-menu-item.icon-yellowpen { background-image: url(../contextMenu/images/yellowpen.png); } */

 /* .tool-block {
    /* list-style: none; */
    /* margin: 0;
    padding: 0; */
    /* background: #ccc; */
    /* display: inline-block;
    position: absolute;
} */

/*
.song-dropdown li a {
    padding: 5px 29px;
    font-size: 14px;
    display: inline-block;
}
#song-dropdown{
  background: #e0e1e2 none;
    color: rgba(0,0,0,.6);
    font-family: 'Lato,Helvetica Neue,Arial,Helvetica,sans-serif';
} */
/* .tool-btn .item{display: inline-block;width:30px;height:30px;background-repeat: no-repeat;} */



.tool-btn {
    display: inline-block;
    position: relative;
}

.tool-btn .menu {
    background: #ccc;
    position: absolute;
    left: 10px;
    z-index: 1;
}

.tool-btn .menu .item.tool-item {
    padding: 6px 34px;
}

.tool-btn .menu .tool-icon {
    display: inline-block;
    width: 17px;
    height: 16px;
    background-repeat: no-repeat;
    position: absolute;
    left: 8px;
}

.tool-btn .item .tool-text {.ui.small.button {padding-left:10px; padding-right: 10px;}
    display: inline-block;
    width: 100%;
    padding-left: 5px;
}

.column.song-left {
    width: 84% !important;
}
.column.song-left + .right.aligned.column {
    width: 16% !important;
}

.ui.simple.dropdown.small.button.small.tool-btn {padding: 10px 34px;margin: 0 0 0 7px;}
.tool-btn .menu{background: #e8e8e8;}
.tool-btn .menu .item:hover {background: rgba(0,0,0,.05);}
.tool-btn .menu .tool-icon{margin-top: 2px;}
.tool-btn .menu .item.tool-item {cursor: pointer;}

/* @media (min-width:1600px){
  .image-markup-canvas{height: 1800px; }
} */

@media (max-width:1400px){
  .column.song-left { width: 80% !important;}
  .column.song-left + .right.aligned.column {width: 10% !important;}
}

@media (max-width: 1000px) {
	.ui.small.button, .ui.small.buttons .button, .ui.small.buttons .or {padding-left:10px; padding-right: 10px;}
	.column.song-left {width: 91% !important; padding-right: 0 !important;}
	.column.song-left + .right.aligned.column {width: 9% !important; padding-left: 0; padding-right: 10px;}
  .tool-btn button.ui.simple.dropdown.small.button.toolbar-button { margin-right: 0;}
  .ui.small.button {padding-left:10px; padding-right: 10px;}
}

@media (max-width:991px){
  .notes-block input:checked + .slider:before{-webkit-transform: translateX(26px);-ms-transform: translateX(26px);transform: translateX(23px);-o-transform: translateX(23px);-moz-transform: translateX(23px);}
}

@media (max-width:767px){
  #musakirja-app .ui.simple.dropdown.small.button.small.tool-btn {width:100%;}
  .ui.dropdown.tool-btn>.dropdown.icon {float: right;}
  .notes-block .toolbar-button {display: none;}
  .sidebar .toolbar-button {margin: 0;width: 100%;background: #e0e1e2 !important;color: rgba(0,0,0,.6) !important;text-align: left;}
  .ui.small.icon.button, .ui.small.icon.button{margin: 0 10px;}
  #musakirja-app main.musakirja-songview header .dropdown.tool-btn {display: inline-block;}
  #musakirja-app main.musakirja-songview header .dropdown.toolbar-button {display: inline-block; }
  .column.song-left + .right.aligned.column {width: 20% !important;}
  .column.song-left { width: 80% !important;}
  .sidebar .ui.item.tool-sidebar { display: none; }
  .notes-block .ui.black.button {padding: 10px;}
	.notes-block button.dropdown.small.button {padding: 10px; margin: 0; margin-left: 10px;}
	.ui.sidebar.menu .item button.ui.black.small.button {background: #e0e1e2 none; color: rgba(0,0,0,0.6); text-transform: capitalize; width: 100%; text-align: left;}
	.notes-block .ui.black.button.save-btn {display: none;}
}


@media (max-width:480px){
  .notes-block input:checked + .slider:before{-webkit-transform: translateX(22px);-ms-transform: translateX(22px);transform: translateX(22px);-o-transform: translateX(22px);-moz-transform: translateX(22px);}
  .notes-block .tool-btn {display: none;}
  .sidebar .ui.item.tool-sidebar { display: inline-block; width:100%; }
  .tool-btn .menu{left: 33px;width: 87%;}
  .ui.vertical.inverted.menu .tool-sidebar .item {color: rgba(0,0,0,.87);}
  .tool-btn .item .tool-text{padding-left: 15px;font-size: 13px;}
  .tool-btn .menu .tool-icon {margin-top: -1px;}
  .tool-btn .menu{padding: 5px 0;border-radius: 4px;-webkit-border-radius: 4px;-o-border-radius: 4px;-ms-border-radius: 4px;-moz-border-radius: 4px;}
  .tool-sidebar .menu {left: 33px;width: 87%;background: #e8e8e8; position: absolute;border-radius: 4px;-webkit-border-radius: 4px;-o-border-radius: 4px;-ms-border-radius: 4px;-moz-border-radius: 4px;padding: 5px 0;}
  .sidebar .ui.item.tool-sidebar{position:relative;}
  .tool-sidebar .menu .tool-icon {display: inline-block;width: 17px;height: 16px;background-repeat: no-repeat;position: absolute;left: 8px;}
  .tool-sidebar .menu .item.tool-item .tool-text {padding-left: 17px;}
}