* {
    
    font-family: Arial, Helvetica, sans-serif;
}

body {
/*background-color: black; */
  background-color: #2D2D2D;

    overflow: hidden;
    overflow-y: auto;
    /*border: 2px green solid;*/
    margin: 0px;
}

body::after{
    content: "";
    clear: both;
    display: table;
    height: 60px;
}



.nav-right{
    position: fixed;
    bottom: 0px;
    width: 100%;
    /*left: 50%;*/
    /*text-align: center;*/
}

.nav-right-2{
    position: relative;
    text-align: center;
}

#ColorTest {

  color: #FFFFFF;
}

#idDivPreview{
    position: relative;
    /*width: 100%;*/
    text-align: center;
}

.modules{
    position: relative;
    height: 90px;
    /*background-color: #FFFFFF;*/
  /*  display: block;
    width: 100%;*/
    border-radius: 10px;
    margin: 15px;
    margin-top: 30px;
    /*background: linear-gradient(to right, white , red,orange,yellow,green,blue,indigo,violet);*/
    /*background: red;*/

    /*animation-iteration-count: infinite;*/
}

.modulesHeader {
    /*border-radius: 0 0 10px 10px;*/
    border-radius: 0 0 0 0;
    position: relative;
    height: 50px;
    width: 100%;
    background: #4D4D4D;
}

.modulIconHolder {
    /*margin: 10px;*/
    position: relative;
}

.modulIconHolder .btn-general {
    margin-left: 10px;
}


/*.modulesHeader .btn-general{
    font-size: 20px;
    position: relative;
    margin: 5px;
    margin-left: 25px;
    height: 40px;
    width: 40px
}


.modulesHeader .burgerMenue{
    position: absolute;
    top: 5px;
    right: 10px;    
    font-size: 25px;
    color: white;
}
*/
.glyphHolder{
    position: absolute;
    float: left;
    font-size: 40px;
    margin: 10px;
    top: 28px;
    z-index: 5;
}

.burgerMenue{
    position: absolute;
    top: 0px;
    right: 10px;    
    font-size: 25px;
    color: white;
    z-index: 1000;
}

.mybtn{
    background: inherit;
    border: none;
    color: white;
}

.rightside{
    position: relative;
    float:right;
}

.moodName{
    text-align: center;
    line-height: 100px;
    /*vertical-align: middle;*/
    position: absolute;
    top: 25%;
    width: 100%;
    margin: auto;
    font-size: 25px;
}

.pickColorBtn {
    font-size: 40px;
    color: white;
    /*position: fixed;*/
    /*
    height: 50px;
    width: 50px;*/
    /*border-radius: 200px 0px 0px 0px;*/
    /*left: 50%;*/
    /*margin-left: -20px;*/
    /*bottom: 5px;*/
    /*background: radial-gradient(at bottom right, white 10%, red,orange,yellow,green,blue,indigo,violet);*/
}

.pickColorBtn .glyphicon{

}

.glyphHolder .glyphicon {
    /*position: absolute;*/

}

.backBtn {
    /*text-align: center;*/
    font-size: 40px;
    color: white;
    position: fixed;
    /*float: left;*/
    border-radius: 200px;
    left: 10px;
    bottom: 5px;
    background: #2d2d2d;
    
    /*background: radial-gradient(at bottom left,red,yellow, #4D4D4D 70%, #4D4D4D);*/
    z-index: 5;
}


/*
.backBtn {
    text-align: center;
    font-size: 25px;
    position: fixed;
    height: 50px;
    width: 50px;
    border-radius:  0px 200px 0px 0px;
    left: 0px;
    bottom: 0px;
    /*background: white;*/
    
/*    background: radial-gradient(at bottom left,red,yellow, #4D4D4D 70%, #4D4D4D);
    z-index: 5;
}
*/



.mood {
    position: relative;
    /*display: block;*/
    /*width: 100%;*/
    height: 40px;
    text-align: center;
    margin: 10px;
/*    margin-left: 20px;
    margin-right: 20px;*/
    border-radius: 10px;
    /*mar*/
    /*background: linear-gradient(to right, white , red,orange,yellow,green,blue,indigo,violet);*/
}

.mood_new {
    position: relative;
    /*display: block;*/
    width: 100%;
    height: 40px;
    text-align: center;
    margin: 10px;
/*    margin-left: 20px;
    margin-right: 20px;*/
    border-radius: 10px;
    /*mar*/
    font-size: 35px;
    font-weight: 800;
    color: black;
    /*-webkit-background-clip: text;*/
    /*-webkit-text-fill-color: transparent;*/
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(to right, white , red,orange,yellow,green,blue,indigo,violet);
        text-shadow:
    -1px -1px 15px #000,
    1px -1px 15px #000,
    -1px 1px 15px #000,
    1px 1px 15px #000;  

    animation: mood_new_change 10s infinite;
}

@keyframes mood_new_change {
    0% {color: white;}
    20% {color: red;}
    40% {color: yellow;}
    60% {color: green;}
    80% {color: blue;}
    /*95% {color: violet;}*/
    100% {color: white;}
}

.mood_active {    

    border-bottom: 2px solid white;
    /*border-radius: 9px;*/

}

.mood_active canvas {
    height: 48px;
    width: 100%;
}

.moodholder{
    /*margin: 10px;
    /*padding-top: 3px;*/
    /*padding-bottom: 6px;*/
    padding: 10px;
    text-align: center;
    z-index: 1;
    /*background: #4D4D4D;*/
    border-radius: 10px;
    margin-bottom: 5px;
    /*margin: auto;*/
}

/*
@keyframes example {
    0%   {left:0px; top:0px;}
    25%  {left:200px; top:0px;}
    100% {left:0px; top:0px;}
}*/

.moodCanvas{
        opacity: 0.9;
    position: relative;
    text-align: left;    
    /*margin: 10px;*/
    /*height: 50px;*/
    border-radius: 10px;
    z-index: 1;/*
    animation: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;*/

}
.glyphicon {
    /*z-index: 2;*/
}

.colorHolder{
    /*display: inline-block;*/
    overflow: hidden;
    /*overflow-x: scroll;*/
    /*position: fixed;*/
    /*top: 90%;*/
    /*bottom: 0;*/
    /*float: left;*/
    /*float: right;*/
    width: 100%;
    height: 60px;
    background: #2d2d2d;
    white-space: nowrap;
    /*z-index: 1000000;*/
}

.colorHolder::after{
    /*content: "";*/
    /*clear: both;*/
    /*display: table;*/
}

.savedColorsCircle{
    white-space: normal;
    position: relative;
    display: inline-block;
    margin: 5px;
    height: 40px;
    width: 40px;
    border-radius: 40px;
    background-color: yellow;
    /*z-index: 100;*/
    /*float: left;*/
}

.savedColorsCircle .glyphicon {
    font-size: 20px;
    position: absolute;
    top: 11px;
    left: 11px;
}

.backBtn-colorpicker {
    /*text-align: center;*/
    display: block;
    font-size: 30px;
    color: white;
    position: fixed;
    /*float: left;*/
    border-radius:  0px 40px 40px 0px;
    left: 0px;
    bottom: 0px;
    margin-left: 0;
    /*background: white;*/
    /*height: 50px;*/
    width: 50px;
    /*background: #2D2D2D;*/
    /*background: radial-gradient(at bottom left,red,yellow, #4D4D4D 70%, #4D4D4D);*/
    z-index: 50;
    background-color: #2D2D2D;
}

.backBtn-colorpicker .glyphicon {
    font-size: 30px;
    top: 5px;
}

.savedColor {
    position: relative;
    height: 40px;
    width: 40px;
    border-radius: 40px;
}

/*
* stuff needed by build moods
*/

#programHolder{
    /*overflow-y: auto;*/
    position: relative;
    /*mar*/
    /*padding: 5px;*/
    /*height: 500px;*/
    /*height: inherit;*/
    /*background: yellow;*/
}

#programHolder::after{
    content: "";
    clear: both;
    display: table;
}

.progHolder{
    /*position: relative;*/
    /*float: left;*/
    width: 100%;
    margin-top: 10px;
    /*height: 50px;*/
    /*background-color: yellow;*/
}

.progHolder::after{
    content: "";
    clear: both;
    display: table;
}

.controlHolder{
    text-align: center;
    font-size: 30px;
    position: relative;
    /*float: left;*/
    width: 100%;
    /*height: 50px;*/
    /*background-color: #4D4D4D;*/
}

.controlHolder::after{
    content: "";
    clear: both;
    display: table;
}

.mySlider {
    /*background: red*/
    color: red;
    border-radius: 10px;
    height: 15px;
    margin: auto;
    /*text-align: center;*/
    position: relative;
    /*width: 50%;*/
    margin-top: 15px;
    margin-bottom: 15px;
}

.mySlider::after {
 /*   content: "";
    clear: both;
    display: table;*/
}
/*.controlHolder*/

.program{
    position: relative;
    text-align: center;
    /*text-anchor: bottom;*/
    /*vertical-align: bottom;*/
    float:left;
    /*width: 10%;*/
    height: 50px;
    margin-bottom: 5px;
    /*min-width: 120px;*/
    /*border: 1px solid lightgrey;*/
    border-radius: 10px;
}

.program .glyphicon{
    user-select: none;
    font-size: 25px;
    top: 12px;
    display: none;
    /*color: red;*/
}

.glyph-add {
    z-index: 10;
    float: right;
    right: 5px;
}

.glyph-time {
    z-index: 10;
    float: left;
    left: 5px;
}

.active .glyphicon{
    z-index: 1;
    display: initial;
}

.update .glyphicon{
    z-index: 1;
    display: initial;
}

.txt-runtime {
    user-select: none;
    /*z-index: -1;*/
    font-size: 20px;
    font-weight: 900;
    position: relative;
    top: 50%;
    margin-top: -15px;
}

.txt-new {
    user-select: none;
    /*z-index: -1;*/
    font-size: 20px;
    font-weight: 900;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -15px;
}


.canvasClass{
    /*position: relative;*/
    /*text-align: center;*/
    /*margin: auto;*/
    /*border-radius: 10px;*/
    /*margin-top: 20px;*/
    /*margin-bottom: 20px;*/
    width: 100%;
    /*height: 100vh;*/
    /*padding: 10px;*/
    /*background: radial-gradient(closest-side, white, red,orange,yellow,green,blue,indigo,violet);*/
}

.canvasClass_2{
    /*position: relative;*/
    /*text-align: center;*/
    margin: auto;
    /*border-radius: 10px;*/
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    height: 500px;
    /*background: radial-gradient(closest-side, white, red,orange,yellow,green,blue,indigo,violet);*/
}

.editPreview{
    position: absolute;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 50px;
    background: linear-gradient(to right, white , red,orange,yellow,green,blue,indigo,violet);
}

/*
*   Buttons
*/
.btn-general{
    background: #2D2D2D;
    color: white;
    height: 50px;
    width: 50px;
    border-radius: 100%;
}

.btn-modules-collapse {
    font-size: 25px;
    /*margin: 10px;*/
    /*padding: 10px;*/
}

.btn-toggle {
    background: white;
}

.btn-toggle-active {
    background: lightgreen;
}

.btn-toggle-active-selected {
    background: white;
}

.btn-toggle-active-unselected {
    background: darkgreen;
}

.btn-toggle-active .glyphicon{
    color: #2D2D2D;
}

.btn-toggle-active-selected .glyphicon{
    color: #2D2D2D;
}

.btn-toggle span{
    color: #2D2D2D;
}

.playBtn{
    /*color: #2D2;*/
    font-size: 50px;
    color: white;
    /*background: yellow;*/
    position: fixed;
 /*   height: 50px;
    width: 50px;*/
    bottom: 5px;
    right: 50%;
    margin-right: -40px;
    border-radius: 10px 50px 0px 0px;
}

.addButton {
    font-size: 40px;
    color: white;
    background: inherit;
    position: absolute;
    bottom: 5px;
    /*right: 10px;*/
 /*   left: 50%;
    margin-left: -15px;*/

}

.bottomLine {
    /*display: flex;*/
    /*flex-flow: left nowrap;*/
    justify-content: center;
    position: fixed; 
    text-align: center; 
    width: 100%;
    background: linear-gradient(to bottom, rgba(45,45,45,0), rgba(90,90,90,1) 100%);
    bottom: 0px; 
    left: 0px;
    font-size: 40px; 
    color: white; 
    z-index: 10000;
    height: 60px;
}
/*
.bottomLine {
    z-index: 1000;
    width: 100%;
    position: fixed;
    height: 100px;
    left: 0px;
    bottom: 0;
    height: 50px;
    background: #2d2d2d;

    display: table;
}*/
/*.bottomLine::after {
    content: "";
    clear: both;
    display: table;
}*/

.glyphDropup{
    z-index: 20;
    text-align: center;
    font-size: 25px;
    position: relative;
    float: right;
    /*position: absolute;*/
    /*right: 5px;*/
    /*top: 50px;*/
    /*margin: 50px;*/
}   

.bottomPosDropup{
    /*z-index: 2000;*/
    /*font-size: 25px;*/
    /*color: green;*/
    position: fixed;
    right: 0px;
    bottom: 0px;
   
    border-radius: 40px 0 0 40px;
    height: 40px;
    width: 40px;
    margin: 5px 0 5px 5px;
    background: #2D2D2D;
    /*left: 50%;*/
    /*margin-left: -50px;*/
}

.topPosDropup{
    z-index: 100;
    position: absolute;
    /*float: right;*/
    /*left: 50%;*/
    /*margin-left: -50px;*/
}

.topMydropup{    
    width: 50px;
    height: 50px;
    border-radius: 0 0 100px 0;
    position: relative;
}

.mydropup{    
    background: #2D2D2D;
    color: white;
    position: absolute;
    /*margin-left: 10px;*/
    /*margin-top: 10px;*/
    bottom: 2px;
    /*text-shadow: 0px 0px 10px #000;*/
    border: none;
    /*width: 50px;*/
    height: 40px;
    border-radius: 40px 0 0 40px;
    position: relative;
}

/*.mydropup:hover{
    background: #2D2D2D;
    /*color: #4D4D4D;*/
/*    border: none;
}*/

.mydropup .glyphDropup {
    font-size: 30px;
    /*margin: 5px;*/
    /*position: absolute;*/
    /*top: 10px;*/
    /*right: 5px;*/
}


.glyphicon-option-horizontal{
    color: white;
}

.glyphicon-option-vertical{
    color: white;
}

.burgerToggle span{
    color: black;
    /*color: "#2d";*/
}

.glypWrench{
    position: absolute;
    /*float: right;*/
    color:white;
    font-size: 35px;
    top: 8px;
    /*margin-bottom: -150px;*/
    right: 10px;
}

/*
* Sliders here
*/

.sliderHolder{
    text-align: center;
    /*margin: 20px 20px 0 20px;*/
    margin: 20px;
}

.holdSlider{
    bottom: 0px;
    position: absolute;
    width: 100%;
    border-radius: 0 15px 15px 0;   
    /*background: linear-gradient(to left, white, black);*/
}

.cp_slider{
    background: linear-gradient(to left, white, black);
}

.cp_slider .noUi-handle{
    box-shadow: 0px 0px 5px #000;
    background: rgba(255,255,255,1) center;
    cursor: col-resize;
    height: 18px;
    width: 18px;
    margin-right: 10px;
    margin-top: 5px;
}

.noUi-handle {    
    /*visibility: hidden;*/
    /*border-radius: 100px;*/
    /*border-image: none;*/
    background: rgba(255,255,255,1) center;
    cursor: col-resize;
 /*   height: 18px;
    width: 18px;*/
    border-radius: 10px;
    /*content: "";*/
    /*user-select: none;*/
    /*margin-right: 10px;*/
    /*margin-top: 5px;*/
}

.noUi-handle:before {
    background: none;    
    content: "";
}

.noUi-handle:after {
    background: none;
    content: "";
}

.noUi-handle:active {

    content: "";
}

.moduleSlider {     
    position: relative;
    bottom: 0px;
    /*left: 5px;*/
    background-color: rgba(0,0,0,0.3);
    border: none;
    box-shadow: none;
    border-radius: 0  0 10px 10px;   
    /*border-radius: 100px 100px 100px 100px;*/
    /*width: 99%;*/
}

.moduleSlider .noUi-handle{
    box-shadow: none;
    /*user-select: none;*/
    border: none;
    background: rgba(255,255,255,1) center;
    cursor: col-resize;
    height: 20px;
    width: 20px;
    margin-right: 10px;
    margin-top: 6px;
}

.moduleSlider .noUi-connect{
    /*height: 50px;*/
    background: linear-gradient(to right, rgba(0,0,0,1) 1% , rgba(255,255,255,1));

    /*border-radius: 0  0 0 15px;   */
    /*border-radius: 100px*/
    /*border-radius: 0 100px 100px 0 ;*/
}

/*.moduleSlider .noUi-state-tap{    
    user-select: none;
    border-radius: 0  0 10px 10px;   
    border: none;
    background: yellow;
    box-shadow: none;
    color: white;
}*/


.sliderBrightness {
    /*text-align: center;*/
    z-index: 1000;
    display: none;
    border: none;
    position: absolute;
    box-shadow: none;
    /*float: right;*/
    /*right: 0;*/
    bottom: 67px;
    /*top: 400px;*/
    /*height: 100%;*/
    height: 30px;
    background: linear-gradient(to left, rgba(0,0,0,1), rgba(255,255,255,0));
    /*width: 80%;*/
}

.sliderBrightness .noUi-handle{
    top: 0px;
    left: 0px;
    height: 30px;
    width: 30px;
    border-radius: 100px;
    background: inherit;
    box-shadow: none;
    text-shadow: none;
    /*width: 100px;*/
    border: 2px solid white;
    
}
.sliderBrightness .noUi-active{
/*    top: -10px;
    height: 10px;
    background-color: black;
    box-shadow: none;
    text-shadow: none;
    width: 100px;
    border: none;*/
    
}


.mySlider .noUi-tooltip{
    border: none;
    background: none;
    font-size: 20px;
    top: -5px;
}


.mySlider:active .noUi-tooltip{
    /*border: white;*/
    user-select: none;
    width: 50px;
    background: white;
    font-size: 20px;
    top: -40px;
}

.mySlider .noUi-active .noUi-tooltip{
    /*border: white;*/
    user-select: none;
    width: 50px;
    background: white;
    font-size: 20px;
    top: -40px;
}

.mySlider .noUi-tooltip:active{
    border: white;
    user-select: none;
    width: 50px;
    background: white;
    font-size: 20px;
    top: -40px;
}
/*
.noUi-handle{
    border: none;
    box-shadow: none;
    text-shadow: none;
    width: 100px;
}

*/
#testSlider .noUi-connect {
    background: linear-gradient(to right, rgba(127, 127, 127, 0), white);
}

#sliderDaylight{
    background: linear-gradient(to right, yellow, white 30% ,white 70%, blue);
}
#sliderDaylight .noUi-connect{
    background: rgba(127, 127, 127, 0);
}


#slideGray{
    width: 90%;
    position: relative;
    margin: auto;
}
/*
.input-tooltip{
    position: absolute;
    top: 10px;
    left: 100px;
    max-width: 100px;
    border: none;
    height: 10px;
    padding: 5px;
    box-sizing: border-box;
  text-align: center;
}

*/

.holdSlider .noUi-target {    
    padding: 0 8px;
    padding-left: 12px;
    background: linear-gradient(to right, black 4%, rgba(0,0,0,0.3) 7%);
    /*background-color: rgba(0,0,0,0.3);*/
}

.noUi-base:before,
.noUi-base:after {
    width: 17px;
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    display: block;
}

.noUi-base:before {
    left: -17px;
}

.noUi-base:after {
    left: 100%;
}

#modalModuleHolder::after {
    content: "";
    clear: both;
    display: table;
    /*height: 60px;*/
}

.iconSelector{
    font-size: 30px;
    margin: 10px;
}


.LEDsSelector{
    /*background: green;*/
    /*height: 40px;*/
    width: 100%;
}


/* .row{

 }

 .row::after {
    content: "";
    clear: both;
    display: table;
}
*/

/*general setup of flexible design*/
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.col-01 {width: 5%;
    display: table;}
.col-02 {width: 90%;
    display: table;}

 [class*="col-"] {
    float: left;

    /*border: 0px solid red;*/
}

.dropdown {
    z-index: 1000;
}


.glyphicon.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

.routines {

    position: relative;
    /*text-align: center;    */
    /*padding: 10px;*/
    margin: 5px;
    /*height: 50px;*/
    border-radius: 10px;

    /*background: blue;*/
    width: 100%;
    height: 50px;
    border: 1px solid gray;
}
.canv_eff{
    height: 25;
    border-radius: 10px;
}


    .progr { width:100%; height:32px;  background-color: rgba(240, 240, 24, 0.6); color:#c0c0c0; }
.progr-ok { width:100%; height:32px;  background-color: rgba(240, 240, 24, 1.0); color:#e0e060; }
.progr-fail { width:100%; height:32px;  background-color: rgba(240, 240, 24, 1.0); color:#c00000; }
.progr-done { width:100%; height:32px;  background-color: rgba(240, 240, 24, 1.0); color:#00c000; }

.col-centered{
    float: none;
    margin: 0 auto;
}

.vcenter {
   display: inline-block;
   vertical-align: middle;
   float: none;
    /*margin: auto;*/
}


/* The container */
.container2 {
   /*vertical-align: middle;*/
  /*flex: 1;*/
  position: relative;
  /*margin: 2px;*/
  /*margin-right: 40px;*/
  /*margin-top: 20px;*/
  /*margin-bottom: 20px;*/
  height: 35px;
  width: 35px;
  /*padding-top: 20px;*/
  /*padding-left: 35px;*/
  /*margin-bottom: 12px;*/
  cursor: pointer;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*font-size: 20px;*/
  font-weight: bold;
  /*background: yellow;*/
  /*border-radius: 50px;*/
}



/* Hide the browser's default checkbox */
.container2 input {
   /*margin: auto;*/
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}  

/* Create a custom checkbox */
.checkmark {
   /*vertical-align: middle;*/
   /*margin: 50px;*/
  position: absolute;
  top: 0;
  left: 0;
  height: 35px;
  width: 35px;
  /*background-color: #2d2d2d;*/
  background-color: #aa0000;
  color: white;
  border-radius: 50px;
}

/* On mouse-over, add a grey background color */
/*.container:hover input ~ .checkmark {
  background-color: #009900;
}
*/
/* When the checkbox is checked, add a blue background */
.container2 input:checked ~ .checkmark {
  background-color: #00aa00;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
   margin: 50px;
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container2 input:checked ~ .checkmark:after {
  display: block;
}

.ledselector{
    /*width: 90%;*/
    padding-bottom: 20px;
    display: flex;

  justify-content: space-around;
    flex-flow: row wrap;
}

.dialog-bottom {
    position: absolute; 
    text-align: center;
    bottom: 0;
    width: 100%;
    margin: auto;
    /*min-width: 100%;*/
}

.content-bottom {
    position: absolute;
    /*margin: auto;*/
    text-align: center;
    bottom: 60px;
    min-width: 100%;
}

/* Style the checkmark/indicator */
/*.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}*/