chamilo-lms2/public/js/hotspot/css/hotspot.css

#hotspot-container {
    position: relative;
}
#hotspot-container svg {
    
}
#hotspot-container #hotspot-context-menu {
    position: absolute;
}

.input-group.hotspot-0 .fa-square,
.hotspot-color-0.fa.fa-square {
   color: rgb(66, 113, 181);
}
.input-group.hotspot-1 .fa-square,
.hotspot-color-1.fa.fa-square {
   color: rgb(254, 142, 22);
}
.input-group.hotspot-2 .fa-square,
.hotspot-color-2.fa.fa-square {
   color: rgb(69, 199, 240);
}
.input-group.hotspot-3 .fa-square,
.hotspot-color-3.fa.fa-square {
   color: rgb(188, 214, 49);
}
.input-group.hotspot-4 .fa-square,
.hotspot-color-4.fa.fa-square {
   color: rgb(214, 49, 115);
}
.input-group.hotspot-5 .fa-square,
.hotspot-color-5.fa.fa-square {
   color: rgb(215, 215, 215);
}
.input-group.hotspot-6 .fa-square,
.hotspot-color-6.fa.fa-square {
   color: rgb(144, 175, 221);
}
.input-group.hotspot-7 .fa-square,
.hotspot-color-7.fa.fa-square {
   color: rgb(175, 134, 64);
}
.input-group.hotspot-8 .fa-square,
.hotspot-color-8.fa.fa-square {
   color: rgb(79, 146, 66);
}
.input-group.hotspot-9 .fa-square,
.hotspot-color-9.fa.fa-square {
   color: rgb(244, 235, 36);
}
.input-group.hotspot-10 .fa-square,
.hotspot-color-10.fa.fa-square {
   color: rgb(237, 32, 36);
}
.input-group.hotspot-11 .fa-square,
.hotspot-color-11.fa.fa-square {
   color: rgb(59, 59, 59);
}

.input-group.hotspot-0.active {
    border-color: rgb(66, 113, 181);
    box-shadow: 1px 1px 10px rgb(66, 113, 181);
    border-radius: 4px;
}
.input-group.hotspot-0.active .input-group-addon {
    border-color: rgb(66, 113, 181);
}
.input-group.hotspot-0.active select {
    border-color: rgb(66, 113, 181);
    border-left-color: #CCC;
}
.input-group.hotspot-1.active {
    border-color: rgb(254, 142, 22);
    box-shadow: 1px 1px 10px rgb(254, 142, 22);
    border-radius: 4px;
}
.input-group.hotspot-1.active .input-group-addon {
    border-color: rgb(254, 142, 22);
}
.input-group.hotspot-1.active select {
    border-color: rgb(254, 142, 22);
    border-left-color: #CCC;
}
.input-group.hotspot-2.active {
    border-color: rgb(69, 199, 240);
    box-shadow: 1px 1px 10px rgb(69, 199, 240);
    border-radius: 4px;
}
.input-group.hotspot-2.active .input-group-addon {
    border-color: rgb(69, 199, 240);
}
.input-group.hotspot-2.active select {
    border-color: rgb(69, 199, 240);
    border-left-color: #CCC;
}
.input-group.hotspot-3.active {
    border-color: rgb(188, 214, 49);
    box-shadow: 1px 1px 10px rgb(188, 214, 49);
    border-radius: 4px;
}
.input-group.hotspot-3.active .input-group-addon {
    border-color: rgb(188, 214, 49);
}
.input-group.hotspot-3.active select {
    border-color: rgb(188, 214, 49);
    border-left-color: #CCC;
}
.input-group.hotspot-4.active {
    border-color: rgb(214, 49, 115);
    box-shadow: 1px 1px 10px rgb(214, 49, 115);
    border-radius: 4px;
}
.input-group.hotspot-4.active .input-group-addon {
    border-color: rgb(214, 49, 115);
}
.input-group.hotspot-4.active select {
    border-color: rgb(214, 49, 115);
    border-left-color: #CCC;
}
.input-group.hotspot-5.active {
    border-color: rgb(215, 215, 215);
    box-shadow: 1px 1px 10px rgb(215, 215, 215);
    border-radius: 4px;
}
.input-group.hotspot-5.active .input-group-addon {
    border-color: rgb(215, 215, 215);
}
.input-group.hotspot-5.active select {
    border-color: rgb(215, 215, 215);
    border-left-color: #CCC;
}
.input-group.hotspot-6.active {
    border-color: rgb(144, 175, 221);
    box-shadow: 1px 1px 10px rgb(144, 175, 221);
    border-radius: 4px;
}
.input-group.hotspot-6.active .input-group-addon {
    border-color: rgb(144, 175, 221);
}
.input-group.hotspot-6.active select {
    border-color: rgb(144, 175, 221);
    border-left-color: #CCC;
}
.input-group.hotspot-7.active {
    border-color: rgb(175, 134, 64);
    box-shadow: 1px 1px 10px rgb(175, 134, 64);
    border-radius: 4px;
}
.input-group.hotspot-7.active .input-group-addon {
    border-color: rgb(175, 134, 64);
}
.input-group.hotspot-7.active select {
    border-color: rgb(175, 134, 64);
    border-left-color: #CCC;
}
.input-group.hotspot-8.active {
    border-color: rgb(79, 146, 66);
    box-shadow: 1px 1px 10px rgb(79, 146, 66);
    border-radius: 4px;
}
.input-group.hotspot-8.active .input-group-addon {
    border-color: rgb(79, 146, 66);
}
.input-group.hotspot-8.active select {
    border-color: rgb(79, 146, 66);
    border-left-color: #CCC;
}
.input-group.hotspot-9.active {
    border-color: rgb(244, 235, 36);
    box-shadow: 1px 1px 10px rgb(244, 235, 36);
    border-radius: 4px;
}
.input-group.hotspot-9.active .input-group-addon {
    border-color: rgb(244, 235, 36);
}
.input-group.hotspot-9.active select {
    border-color: rgb(244, 235, 36);
    border-left-color: #CCC;
}
.input-group.hotspot-10.active {
    border-color: rgb(237, 32, 36);
    box-shadow: 1px 1px 10px rgb(237, 32, 36);
    border-radius: 4px;
}
.input-group.hotspot-10.active .input-group-addon {
    border-color: rgb(237, 32, 36);
}
.input-group.hotspot-10.active select {
    border-color: rgb(237, 32, 36);
    border-left-color: #CCC;
}
.input-group.hotspot-11.active {
    border-color: rgb(59, 59, 59);
    box-shadow: 1px 1px 10px rgb(59, 59, 59);
    border-radius: 4px;
}
.input-group.hotspot-11.active .input-group-addon {
    border-color: rgb(59, 59, 59);
}
.input-group.hotspot-11.active select {
    border-color: rgb(59, 59, 59);
    border-left-color: #CCC;
}

.input-group.hotspot-0 select:focus,
.input-group.hotspot-1 select:focus,
.input-group.hotspot-2 select:focus,
.input-group.hotspot-3 select:focus,
.input-group.hotspot-4 select:focus,
.input-group.hotspot-5 select:focus,
.input-group.hotspot-6 select:focus,
.input-group.hotspot-7 select:focus,
.input-group.hotspot-8 select:focus,
.input-group.hotspot-9 select:focus,
.input-group.hotspot-10 select:focus,
.input-group.hotspot-11 select:focus {
    box-shadow: none;
}
.input-group.hotspot-0 select,
.input-group.hotspot-1 select,
.input-group.hotspot-2 select,
.input-group.hotspot-3 select,
.input-group.hotspot-4 select,
.input-group.hotspot-5 select,
.input-group.hotspot-6 select,
.input-group.hotspot-7 select,
.input-group.hotspot-8 select,
.input-group.hotspot-9 select,
.input-group.hotspot-10 select,
.input-group.hotspot-11 select {
    transition: none;
    border-color: #CCC;
}

svg .hotspot-0,
svg .hotspot-1,
svg .hotspot-2,
svg .hotspot-3,
svg .hotspot-4,
svg .hotspot-5,
svg .hotspot-6,
svg .hotspot-7,
svg .hotspot-8,
svg .hotspot-9,
svg .hotspot-10,
svg .hotspot-11 {
    stroke-width: 2;
}

svg .hotspot-0 {
    stroke: rgb(66, 113, 181);
    fill: rgba(66, 113, 181, 0.75);
}
svg .hotspot-1 {
    stroke: rgb(254, 142, 22);
    fill: rgba(254, 142, 22, 0.75);
}
svg .hotspot-2 {
    stroke: rgb(69, 199, 240);
    fill: rgba(69, 199, 240, 0.75);
}
svg .hotspot-3 {
    stroke: rgb(188, 214, 49);
    fill: rgba(188, 214, 49, 0.75);
}
svg .hotspot-4 {
    stroke: rgb(214, 49, 115);
    fill: rgba(214, 49, 115, 0.75);
}
svg .hotspot-5 {
    stroke: rgb(215, 215, 215);
    fill: rgba(215, 215, 215, 0.75);
}
svg .hotspot-6 {
    stroke: rgb(144, 175, 221);
    fill: rgba(144, 175, 221, 0.75);
}
svg .hotspot-7 {
    stroke: rgb(175, 134, 64);
    fill: rgba(175, 134, 64, 0.75);
}
svg .hotspot-8 {
    stroke: rgb(79, 146, 66);
    fill: rgba(79, 146, 66, 0.75);
}
svg .hotspot-9 {
    stroke: rgb(244, 235, 36);
    fill: rgba(244, 235, 36, 0.75);
}
svg .hotspot-10 {
    stroke: rgb(237, 32, 36);
    fill: rgba(237, 32, 36, 0.75);
}
svg .hotspot-11 {
    stroke: rgb(59, 59, 59);
    fill: rgba(59, 59, 59, 0.75);
}

svg .hotspot-answer-point {
    fill: rgba(0, 103, 124, 0.75);
    stroke: rgb(0, 103, 124);
    stroke-width: 1;
    cursor: move;
}

svg .hotspot-answer-text {
    cursor: move;
    fill: #FFF;
    font-family: sans-serif;
}