.col-md-9.widthAll{ width: 100%; }
.btn.btn-add{ background: #3C8DBC; color: white; border-color: #222D32; }
.btn.btn-save{ background: green; color: white; border-color: #222D32; }
.btn-filtr{ font-size: 20px; padding: 18px 20px; margin-top: 0px; display: block; float: right; margin-left: 10px; }
#fotoUpload{ padding: 20px; border: 2px dashed grey; margin: 10px 0px; background: white; }
textarea.form-control{ min-height: 300px; max-height: 400px; }
.form-right{ float: right; }
#gallery{ padding: 20px; background: white; margin: 10px 0px; border-radius: 5px; border: 1px solid #E5E5E5; position: relative; }
#gallery .imgContener{ width: 150px; height: 170px; float: left; margin-right: 20px; margin-bottom: 10px; position: relative; transition: all 0.3s; }
#gallery .imgContener.default{ border-color: black; }
#gallery .imgContener:hover{ box-shadow: 0px 0px 5px rgba(0,0,0,0.5); }
#gallery .imgContener a.img{ display: block; height: 90px; overflow: hidden; border: 1px solid #E0E0E0; }
#gallery .imgContener a.img img{ width: 100%; }
#gallery:after{ content: ''; display: block; clear: both; }
#gallery .imgContener a.icons{ position: absolute; font-size: 19px; top: 3px; left: 3px; text-shadow: 0px 0px 2px rgba(255,255,255,1),  0px 0px 2px rgba(255,255,255,1); }
#gallery .imgContener a.icons:hover{ color: black; }
#gallery .imgContener a.icons.removeImage{ left: auto; right: 3px; }
#gallery .imgContener a.icons i.fa-check-square-o{ color: green; }
#gallery .imgContener span.txt{ display: block; width: 100%; position: absolute; bottom: 0px; left: 0px; box-sizing: border-box; word-break: break-all; }
#gallery .imgContener:hover span.txt:after{ content: 'Edit'; display: block; position: absolute; top: 0px; right: -30px; color: grey }
#gallery label{ position: absolute; top: -14px; right: 8px; padding: 3px 10px; border-radius: 4px; border: 1px solid #E5E5E5; background: white; }




.btn.btn-right{ float: right; }
.table tr td.tdShort{ width: 31px; }
.table tr td.tdShort3{ width: 75px; }
.table tr td.tdShort2{ width: 130px; }
.table tr td.tdShortInput{ width: 60px; }
.table tr td.tdShortInput input[type=text]{ width: 100%; }
.table tr td a.action{ display: inline-block; background: green; color: white; border-radius: 3px; padding: 5px 10px; }
.table tr td a.action:hover{ background: orange; }
.table tr.over:hover td{ background: #008d4c; cursor: pointer; color: white; }
.table tr.spons{ background: #B7E098; }

.login-box-msg{ position: relative; height: 40px; }
.login-box-msg span{ display: block; position: absolute; width: 100%; left: 0px; top: 0px; }
.login-box-msg .login-box-msg-default{ display: block; }
.login-box-msg .login-box-msg-warning{ display: none; color: red; }
.login-box-msg .login-box-msg-good{ display: none; color: green; }

.login-box-body.shake , .lockscreen-item.shake{ -webkit-animation: shake .3s ease-in-out; animation: shake .3s ease-in-out; }

.cl,.clear{ clear: both; }

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-20px);
  }

  40% {
    transform: translateX(20px);
  }

  60% {
    transform: translateX(-20px);
  }

  80% {
    transform: translateX(20px);
  }

  100% {
    transform: translateX(0);
  }
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(0);
  }

  20% {
    -webkit-transform: translateX(-20px);
  }

  40% {
    -webkit-transform: translateX(20px);
  }

  60% {
    -webkit-transform: translateX(-20px);
  }

  80% {
    -webkit-transform: translateX(20px);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}

.addProduct{ float: right; }
.addProduct a{ display: block; border-radius: 4px; padding: 5px 10px; background: green; color: white; font-size: 12px; transition: all 0.3s; }
.addProduct a:hover{ text-decoration: none; background: black; }
.addCat , .addTag{ font-size: 20px;}
#addInputTags{ display: none; }
#addInputTags input[type=text]{ width: 180px; border: 1px solid #D2D6DE; padding: 6px 12px; font-size: 14px; line-height: 1.42857; color: #555; }
#addInputTags input[type=button]{ border: 1px solid #D2D6DE; padding: 6px 12px; font-size: 14px; line-height: 1.42857; color: #555; }
#cat{ position: absolute; display: none; top: 0px; left: 0px; padding: 5px 5px 5px 5px; background: white; border-radius: 4px; }
#cat i{ position: absolute; top: -2px; right: 2px;  }
#cat select{ background: #EEEEEE; border: 0px; }
#cats , #tags{ display: inline-block; }
#cats div.ct , #tags div.ct{ display: inline-block; font-size: 12px; margin-right: 8px; position: relative; border-radius: 3px; background: #EDEDED; padding: 3px 10px; margin-bottom: 5px; }
#cats div.ct a.closeCat , #tags div.ct a.closeTag{ position: absolute; right: -2px; top: -10px; display: inline; font-size: 12px; }
#cats div.ct .clabel{ text-decoration: none; color: inherit; }

.form-group-round{ border-radius: 5px; background: #F7F7F7; padding: 20px 5px 5px 5px; position: relative; }
.form-group-round label{ position: absolute; top: -8px; left: 10px; border-radius: 5px; background: inherit; padding: 3px 5px; color: red; }
.btn-delete{ background: red; color: white; }
.btn-black{ background: black; color: white; }
.btn-delete__:hover{ background: black; }
.btn-right{ float: right; }
.form-group select , h3 select , .form-group input[type=text] , select.stylized{ height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857; color: #555; background-color: #FFF; background-image: none; border: 1px solid #CCC; }
.form-group select.project{ background: red; color: white; font-weight: bold; }
.rowQue .form-group input[type=text]{ width: 100%; }
.excell{ display: inline-block; width: 30px; float: right; }
.excell img{ width: 100%; }

.form-group.col-imp select , .form-group.col-imp input[type=text]{ background: #E4E4E4; border-color: black; }
.form-group.col-imp select:focus , .form-group.col-imp input[type=text]:focus{ box-shadow: 0px 0px 5px rgba(0,0,0,0.6); border-color: white; }


.form-group-left{ margin-left: 10px; display: inline-block; }
.UserStats{ display: inline-block; line-height: 16px; }
.sidebar-menu li.active a{ color: white; border-left-color: #3C8DBC; }
.form-doz{ padding: 10px; background: #F4F4F4; border: 1px solid #D6D6D6; }
.sidebar-menu a.checked , .sidebar-menu li.checked a{ color: #63ff44 !important; }
.sidebar-menu a.activeHeader{ color: white !important; }

.statsLeft{ margin: 10px 6px; color: #969696; font-size: 12px; padding: 3px; width: 250px; }
.statsLeft .header{ background: #214C66; color: white; padding: 3px; text-align: center; }
.statsLeft .sLeft{ width: 170px; float: left; }
.statsLeft .sRight span{ color: #367FA9; font-weight: bold; }
.statsLeft .sRight span.red{ color: magenta; }
.statsLeft .sRight:after{ display: block; content: ''; clear: both; }

.form-mod{ border: 1px solid #D8D8D8; background: #EFEFEF; padding: 15px 10px 10px 10px; position: relative; }
.form-mod label{ position: absolute; top: -10px; right: 10px; font-weight: bold; background: #EFEFEF; padding: 0px 10px; }
.form-mod-recept{ background: #7AB3D4; padding: 15px 10px 10px 10px; position: relative; }
.form-mod-recept label{ color: white; }
.form-mod-recept label.head{ position: absolute; top: -10px; right: 10px; font-weight: bold; background: #7AB3D4; padding: 0px 10px; }

tr.active_1 td{ background: #FFE6C4; }
tr.active_2 td{ background: #E6FCE3; }

.form-50{ width: 49%; margin-right: 10px; }
.form-left{ float: left; }
.clear{ clear: both; }
.content-header-nopadding{ padding-left: 0px; }

.content-head-right{ float: right; }
.content-head-right .value{ margin-left: 10px; float: right; }
.col-height-stat{ min-height: 280px; }
.wait{ background: yellow; padding: 3px 10px; color: black; font-weight: bold; border-radius: 3px; }
.accept{ background: green; padding: 3px 10px; color: white; font-weight: bold; border-radius: 3px; }
.tRight{ float: right; }

.copySource{ padding: 1px 10px; background: #D2D6DE; border-radius: 3px; display: inline-block; }
.copySource i{ margin-right: 10px; }

.lRemove{ float: right; }
.lRemove ul{ display: block; list-style: none; padding: 0px; margin: 0px; }
.lRemove ul li{ display: block; padding: 0px; margin: 0px; }
.lRemove:after{ display: block; content: ''; clear: both; }

.nav-stacked > li.liAll a{ color: red; }
.label-primary.warning{ background-color: #F39E15 !important; }
.box .navLeft li{ position: relative; display: block; }
.box .navLeft li a.remove{ position: absolute; top: -1px; right: 0px; z-index: 90; padding: 10px 6px 11px 6px; }
.box .navLeft li a.edit{ position: absolute; top: -1px; right: 30px; z-index: 90; padding: 10px 6px 11px 6px; }
.box .label{ margin-right: 60px; }

#statsDown{ width: 320px; position: fixed; right: -270px; bottom: 74px; min-height: 200px; }
#statsDown a.slide{ font-size: 30px; color: white; border-radius: 10px; background: black; display: inline-block; position: absolute; bottom: 0px; left: 0px; padding: 10px 20px 10px 10px; }
#statsDown .body{ position: absolute; top: 0px; right: 0px; min-height: inherit; background: black; width: 270px; }
#statsDown .body .sStat{ margin-bottom: 10px; color: white; font-size: 12px; }
#statsDown .body .sStat header{ display: block; padding: 1px 3px; text-align: center; background: #727272; }
#statsDown .body .sStat .line{ padding: 0px 10px 0px 10px; }
#statsDown .body .sStat .line span{ color: #FF7200; font-weight: bold; }
#statsDown .body .sStat .line span.all{ color: yellow; }

.table tbody tr td i{ color: grey; }
.table tbody tr td i.fa{ color: #357CA5; }
.table tbody tr td a.delete , .table tbody tr td a.waitOpinion , .table tbody tr td a.denyOpinion{ margin-top: 5px; padding: 3px 10px; background: grey; display: inline-block; border-radius: 3px; color: white; }
.table tbody tr td a.delete i, .table tbody tr td a.waitOpinion i, .table tbody tr td a.denyOpinion i{ color: white; }
.table tbody tr td a.waitOpinion{ background: #3C8DBC; }
.table tbody tr td a.denyOpinion{ background: red; }
.table tbody tr td a.delete:hover , .table tbody tr td a.waitOpinion:hover , .table tbody tr td a.denyOpinion:hover{ background: black; }

.table tr a.act{ padding: 3px 10px; border-radius: 4px; color: white; }
.table tr.active_1 a.act{ background: red; }
.table tr.active_0 a.act{ background: #60D664; }

#formEdit{ position: absolute; width: 300px; height: 90px; display: none; }
#formEdit form textarea{ border: 0px; padding: 10px; margin: 0px; box-sizing: border-box; display: block; border: 0px; width: 100%; height: 100%; border: 1px solid grey; }

.ajaxComm{ position: fixed; top: -100px; left: 50%; width: 250px; padding: 40px 10px 20px 10px; text-align: center; margin-left: -125px; border-radius: 5px; background: rgba(73,135,22,0.9); color: white; z-index: 1800; }
.ajaxComm.warning{ background: red; font-weight: bold; }

.onscSelect{ margin: -10px 0px 10px 0px; }
.artRange{ margin: 10px 0px; }
.artRange input{ width: 100%; }

#bgCategory{ display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(255,255,255,0.9); z-index: 100; }
#category{ display: none; position: absolute; top: 150px; left: 50%; width: 700px; margin-left: -350px; background: white; padding: 20px; border: 1px solid grey; box-shadow: 0px 0px 10px rgba(0,0,0,0.6); z-index: 120; }
#category ul ul , #category ul ul ul{ display: none; }
#category ul.cCombo.c1{ margin-left: 30px; }

#category ul{ display: block; margin: 0px; padding: 0px; list-style: none; }
#category ul li{ display: block; padding: 3px 10px 3px 10px; border-radius: 5px; }
#category ul li a{ display: inline-block; margin: 0px; padding: 3px 10px 3px 30px; border-radius: 6px; position: relative; }
#category ul li a:not(.clickMain):after{ display: block; font-family: FontAwesome; content: '\f10c'; position: absolute; top: 3px; left: 0px; }
#category ul li a.clickMain{ padding-left: 10px; }
#category ul.cCombo.c1 li a:after{ content: '\f111'; }
#category .selected{ background: #DBDBDB; }

#monitor table{ width: 100%; }
#monitor table tr td{ padding: 5px 10px; }
#monitor table tr.alien td{ font-weight: bold; color: green; }
#monitor table tr td.refAlien span{ display: inline-block; padding: 3px 5px; background: green; color: white; border-radius: 4px; }
#monitor table tr td.sess{ width: 40px; padding-top: 10px; padding-bottom: 0px; }
#monitor table tr td.sess span{ display: block; width: 15px; height: 15px; border-radius: 15px; }

.boxDash{ width: 200px; height: 200px; border: 3px dashed #CCCCCC; display: inline-block; margin: 20px 0px 20px 20px; background: white; position: relative; }
.boxDash .title{ position: absolute; cursor: pointer; width: 100%; box-sizing: border-box; padding: 8px 0px; text-align: center; top: 0px; left: 0px; background: #D1D1D1; z-index: 100; transition: all 0.3s; }
.boxDash .title:hover{ background: black; color: white; }
.boxDash .id{ position: absolute; box-sizing: border-box; padding: 8px 7px; bottom: 0px; left: 0px; background: #D1D1D1; z-index: 120; }
.boxDash .upload{ position: absolute; cursor: pointer; width: 100%; height: 100%; top: 0px; left: 0px; background: url(../img/Upload.png) no-repeat center center; z-index: 90; background-size: 50%; opacity: 0.3; transition: opacity 0.3s; }
.boxDash:hover .upload{ opacity: 1; }
.boxDash:hover , .boxDash.selected{ box-shadow: 0px 0px 4px rgba(0,0,0,0.8); border-color: grey; }
.boxDash .img{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 80; }
.boxDash .img img{ width: 100%; }
.boxDash.selected{ border-color: black; }
.boxDash.boxDash-0{ border-color: red; }

#infoProduct{ display: none; position: fixed; width: 600px; height: 400px; top: 50%; left: 50%; margin: -200px 0px 0px -300px; box-sizing: border-box; padding: 20px; background: white; border: 1px solid grey; box-shadow: 0px 0px 10px black; border-radius: 10px; z-index: 2200; overflow: auto; }
#infoProduct h3{ font-weight: bold; border-bottom: 1pxc solid red; color: red; font-size: 20px; margin: 0px 0px 10px 0px; }
#infoProductBg{ display: none; width: 100%; height: 100%; background: rgba(255,255,255,0.7); position: fixed; content: ''; top: 0px; left: 0px; z-index: 1200; }

#cAll , #cUser{ font-weight: bold; }

.box-stats .row{ padding: 20px; }
.box-stats .row .col-stat{ padding: 0px 0px 0px 20px; }
.box-stats .row ul{ display: block; list-style: none; margin: 0px; padding: 0px; }
.box-stats .row ul li{ display: block; margin: 0px; padding: 0px; }
.box-stats .row ul li span{ font-weight: bold; }
.box-stats .row .col-stat label{ color: #008548; }

.productsComponents{ padding: 10px 0px 20px 20px; }
.addP{ padding: 20px; }
.productsComponents .product{ display: inline-block; padding: 10px 20px; border-radius: 5px; background: #dedfe0; position: relative; }
.productsComponents .product a.close{ position: absolute; top: 0px; right: 0px; color: green; }
.productsComponents .product a.close:hover{ color: red; }

.form-group.imp{ background: #f39c12; color: white; padding: 10px 10px 0px 10px; }
.form-group.imp2{ background: green; color: white; padding: 10px 10px 0px 10px; }
.bIcons{ font-size: 20px; margin-left: 5px; }
.bIcons a{ margin-right: 5px; border-radius: 4px; border: 1px solid #3c8dbc; padding: 3px 9px; display:  inline-block; }
.bIcons a:hover{ background: #3c8dbc; color: white; }
.bIcons a.checked{ background: #63ff44; }
.bIcons a.switch{ border-right: 3px solid #3c8dbc; border-bottom: 3px solid #3c8dbc; padding-top: 0px; }
.bIcons a.switch.on{ background: #3c8dbc; color: white; }

table.stats{ margin: 20px auto; padding: 2px; border-radius: 3px; background: #ededed; border: 1px solid #e0e0e0; }
table.stats th , table.stats td{ padding: 5px 10px; }
table.stats th{ background: #c4c4c4; color: white; text-shadow: 1px 1px 1px black; }
table.stats td.main{ font-weight: bold; text-shadow: 0px 0px 1px rgba(255,255,255,1); }
table.stats td.imp{ font-weight: bold; color: #ba6d25; }
table.stats tr:nth-child(odd) td{ background: #e0e0e0; }
table.stats tr td.suma{ background: #ede2ad; border-top: 1px solid black; font-weight: bold; }
table.stats tr.imp td{ background: #d6e0b1; }
table.stats tr.imp2 td{ font-weight: bold; }

#addModHide{ display: inline-block; margin-top: 4px; display: none; }
.userComm{ background: #70d385; display: inline-block; padding: 5px 10px 5px 30px; margin-left: 10px; color: white; text-shadow: 1px 1px 1px black; border-radius: 2px; position: relative; }
.userComm:after{ display: block; content: '\f05a'; font-family: FontAwesome; position: absolute; left: 10px; top: 5px; }
.deny{ background: #a5a360; display: inline-block; padding: 5px 10px 5px 30px; margin-left: 10px; color: white; text-shadow: 1px 1px 1px black; border-radius: 2px; position: relative; }
.active_1 .deny{ background: red; }
.deny:after{ display: block; content: '\f0e7'; font-family: FontAwesome; position: absolute; left: 10px; top: 5px; }
.tag{ background: orange; display: inline-block; padding: 5px 10px 5px 24px; margin-left: 10px; color: white; text-shadow: 1px 1px 1px black; border-radius: 2px; position: relative; }
.tag:after{ display: block; content: '\f10b'; font-family: FontAwesome; position: absolute; left: 7px; top: 0px; font-size: 20px; }
.tag.tagIp{ background: #2b75c4; color: white; padding-left: 30px; }
.tag.tagIp:after{ content: '\f1b0'; }
.tag.tagIpe{ background: green; color: white; padding-left: 35px; }
.tag.tagIpe:after{ content: '\f024'; }
.tag.tagCopy{ background: brown; color: white; padding-left: 30px; }
.tag.tagCopy:after{ content: '\f040'; }
.tag.tagFirma{ background: red; color: white; padding-left: 30px; }
.tag.tagFirma:after{ content: '\f0e3'; }
.tag.tagSpam{ background: black; color: white; padding-left: 30px; }
.tag.tagSpam:after{ content: '\f119'; }
.tag.tagComm{ background: pink; color: black; padding-left: 35px; border-left: 2px solid black; text-shadow: 1px 1px 1px white; }
.tag.tagComm:after{ content: '\f0e5'; }
.tag.tagReject{ background: red; color: white; padding-left: 35px; text-shadow: 1px 1px 1px black; }
.tag.tagReject:after{ content: '\f071'; }
.tag.tagAnimal{ background: #98D849; color: black; padding-left: 35px; text-shadow: 1px 1px 1px white; }
.tag.tagAnimal:after{ content: '\f06c'; }

#cSim{ display: none; z-index: 900; position: absolute; top: 0px; height: 250px; width: 200px; background: #e2e2e2; padding: 5px; box-sizing: border-box; overflow: auto; }
#cSim .header{ background: #b7b7b7; padding: 5px; text-align: center; }
#cSim .line{ text-align: left; margin: 0px; }
#cSim .line i{ margin-right: 5px; }
#cSim .line a{ text-decoration: none; color: black; display: block; padding: 5px 5px; }
#cSim .line a:hover{ background: #cccccc; }

.ajaxResults{ background: eaeaea; padding: 10px; border: 1px solid rgba(0,0,0,0.2); }
.fAjax2{ margin-right: 20px; }
.fAjax2 span{ display: none; font-weight: bold; padding: 5px 10px; border-radius: 3px; background: green; color: white; margin-left: 10px; }
#ch2.fAjax2 span{ background: blue; }
.ajaxResults span.comm{ color: grey; font-style: italic; margin-left: 10px; }
.ajaxResults span.name{ color: green; font-weight: bold; }
.etykieta{ background: #70ed4e; border: 1px dashed #4cb223; display: inline-block; padding: 6px 10px; border-radius: 3px; }
.lang{ background: grey; color: #f4f4f4; padding: 7px 0px 7px 10px; margin-left: 20px; font-weight: bold; text-shadow: 1px 1px 1px black; }

.ipList span.l{ display: inline-block; background: grey; padding: 3px 5px; border-radius: 3px; margin-right: 5px; color: white; position: relative; }
.content .ipList span.l a{ position: absolute; top: -10px; right: 3px; color: red; text-decoration: none; }
.content .ipList span.l a i{ color: inherit; }

.statsTop{ position: absolute; top: 14px; right: 450px; z-index: 1500; color: white; }
.statsTop span{ font-weight: bold; text-shadow: 0px 0px 2px black; background: orange; display: inline-block; padding: 2px 7px; border-radius: 3px; }

#camBg{ display: none; background: rgba(255,255,255,0.7); width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; }
#camBg #camera{ width: 302px; height: 252px; position: absolute; top: 50%; left: 50%; margin-left: -150px; margin-top: -125px; border: 1px solid black; background: white; }
#camBg a{ display: block; position: absolute; top: 50%; left: 50%; margin-top: -150px; width: 302px; text-align: center; margin-left: -150px; }

.roundBox{ display: inline-block; border-radius: 3px; background: #EDEDED; padding: 5px 10px; }

.ops{ }
.tab{ display: inline-block; border-radius: 3px; border: 1px solid #E5E5E5; background: #F4F4F4; padding: 2px 10px 5px 10px; height: 69px; }
.tab label{ display: block;  }
.tab.tabDate{ background: #CCDBCB; border: 1px solid #2F5B1A; float: right; margin-left: 10px; }
.tab select{ max-width: 100px; }
.tab.tabActive{ width: 200px; float: none; background: white; }
.tab.tabActive .mCheck i{ font-size: 24px; }

#sendFiltr input.dateRangeOpinions[type=text]{ padding: 3px 5px; width: 151px; }
a.opinionGoProduct{ display: block; padding: 3px 10px; margin: 5px 0px 5px 0px; background: #97C6C2; color: black; text-decoration: underline; text-align: center; font-weight: bold; }
a.opinionGoProduct:hover{ background: black; color: white; }
a.opinionGoProduct.goArt{ background: pink; }

span.statusLink{ display: inline-block; background: #EDEDED; border-radius: 5px; border: 1px solid grey; padding: 9px 10px; margin-left: 20px; font-size: 14px; }
#datePickerLInks{ text-align: center; }
#datePickerLInks input{ background: #E4E4E4; padding: 6px 10px; border: 0px; }

.chartSimple{ display: block; height: 17px; background: yellow; width: 300px; position: relative; border-radius: 2px; box-sizing: border-box; }
.chartSimple span.chart{ display: block; height: inherit; background: green; position: absolute; top: 0px; left: 0px; z-index: 10; }
.chartSimple span.label{ display: block; position: absolute; color: white; text-shadow: 0px 0px 1px black,0px 0px 1px black,0px 0px 1px black,0px 0px 1px black,0px 0px 1px black; z-index: 20; top: 2px; left: 0px; }

.rowQue{ padding: 0px 10px; border-radius: 5px; background: #E2E2E2; box-sizing: border-box; margin: 0px 0px; position: relative; }
.rowQue label.main{ position: absolute; top: -10px; left: 10px; background: green; border-radius: 3px; padding: 5px 10px; color: white; }

.statColor{ display: inline-block; background: #EFEFEF; padding: 4px 10px; border-radius: 4px; }

.square{ display: inline-block; margin-left: 10px; width: 15px; height: 15px; }
.square.sblue{ background: rgba(60,141,188,0.8); }
.square.sgreen{ background: rgba(36, 191, 113, 0.6); }
.square.sorange{ background: rgba(242, 137, 58, 0.6); }