.mybutton{
	vertical-align: middle;
}
#whiteboardColorSelected{
    /*background-color:black; */
/*    width:18px; 
    height: 18px;*/
    width: 70%;
    height: 100%;
    margin: auto;
    border-radius: 5px;
}


#whiteBoardControlsDiv{
    font-family: hype artboard !important;
    /* top: 49px; */
}

.actionToolSelected{
    background-color: #80C340 !important;
}
div#tools  a[type="button"], div#tools  button{
    border-top-width: 0px;
    background-image: none !important;
    background-color: #e3e6ef;
    border-color: #b7b6bb;
}
#clearWhiteBoardButton{
    border-top: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0px;
    background-color: #e3e6ef;
    border-color: #b7b6bb; 
}

#saveWhiteBoardButton{
    margin-left:-1px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0px;
    background-color: #e3e6ef;
    border-color: #b7b6bb; 
}
/*div#tools a[type="button"]:active, div#tools  button:active{
    background-color: #80C340;
}
*/

#textColor > button, #paintColor > button{
	border: none;
	border-radius: 5px;
	padding: 0;
	font-size: 20px;
}

#brushSizes{
    min-width: 117px;
}
#brushSizes > button{
    border: none;
    height: 25px;
    width: 25px;
    border-radius: 33px;
    background-color: transparent !important;
    margin: 5px;
    padding: 0px;
}
#brushSizes > button:hover{
    background-color: #e8e8e8 !important;
}

#red{
/*background: #FF0000 !important;*/
}

#black{
/*background: #000000 !important;*/
}

#blue{
/*background: #0003FF !important;*/
}

#green{
/*background: #00BF06 !important;*/
}

#yellow{
/*background: #F9FF00 !important;*/
}

#purple{
/*background: #A100FF !important;*/
}

#pink{
/*background: #FF00F2 !important;*/
}

#grey{
/*background: #6F666F !important;*/
}

#brown{
/*background: #735520 !important;*/
}

#orange{
/*background: #FF8000 !important;*/
}

#dark-green{
/*background: #0FB007 !important;*/
}

#light-blue{
/*background: #00BFFF !important;*/
}
#backgroundWhiteboardButton {
    margin-left:-1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #e3e6ef;
    border-color: #b7b6bb; 
}

#whiteBoardControlsDiv .btn-group.btn-group-md:not(.width-100-precent){
   width: 64%;
}

#whiteBoardControlsDiv .btn-group.btn-group-md.brushSizesDiv,
#whiteBoardControlsDiv .btn-group.btn-group-md.brushSizesDiv > button{
   width: 100%;
}

#whiteBoardControlsDiv a,
#whiteBoardControlsDiv .btn-group.btn-group-md.brushSizesDiv > button,
#whiteBoardControlsDiv .btn-group.btn-group-md > button{
   width: 100%;
   height: 6.5%;
}

#whiteBoardControlsDiv .width-100-percent,
#whiteBoardControlsDiv .btn-group.btn-group-md.width-100-percent{
    width: 100%;
    display: table;
    height: 6.5%;
}

div#whiteBoardControlsDiv a > img, #whiteboardColorSelected >img, div#whiteBoardControlsDiv button > img:not(.dropdown-options-images){
    width: 70%;
}

#whiteBoardControlsDiv [class*="-wb"]:not(.mybutton){
    display: table;
    /*font-family: hype artboard;*/
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
}
#whiteBoardControlsDiv [class*="-wb"]:before{
    display: table-cell;
    vertical-align: middle;
}

ul#textColor, ul#paintColor, ul#lineTypes{
	width: max-content;
	padding: 5px;
	min-width: 100px
}

.icon-pen-wb{
	/*padding-left: 17px !important;*/
}
.icon-pen-wb:before,
#tools > .btn.btn-default.icon-line-wb:before{
	transform: rotate(-45deg) ;
	display: inline-block;
   font-family: 'hype artboard';
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
}

@media (min-width: 1000px){
    /*.wb-controls-first-row > div.btn-group.btn-group-md > a{*/
    #whiteBoardControlsDiv [class*="-wb"]{
        font-size: 18px;
    }

    #whiteBoardControlsDiv .icon-pen-wb{
        font-size: 24px;
    }
    #whiteBoardControlsDiv #first-btn-group [class*="-wb"] {
	    font-size: 13px;
	}
}

@media (min-width: 1519px){
    div#whiteBoardControlsDiv a > img, #whiteboardColorSelected >img, div#whiteBoardControlsDiv button > img:not(.dropdown-options-images){
        width: 65%;
    }    
    /*.wb-controls-first-row > div.btn-group.btn-group-md > a{*/
	#whiteBoardControlsDiv [class*="-wb"]{
        font-size: 22px;
    }
    #whiteBoardControlsDiv .icon-pen-wb{
        font-size: 28px;
    }
    #whiteBoardControlsDiv #first-btn-group [class*="-wb"] {
	    font-size: 17px;
	}
} 

@media (min-width: 1708px){
    /*.wb-controls-first-row > div.btn-group.btn-group-md > a{*/
    #whiteBoardControlsDiv [class*="-wb"]{
        font-size: 24px;
    }
    #whiteBoardControlsDiv .icon-pen-wb{
        font-size: 30px;
    }
    #whiteBoardControlsDiv #first-btn-group [class*="-wb"] {
	    font-size: 19px;
	}
} 

@media (min-width: 1822px){
    div#whiteBoardControlsDiv a > img, #whiteboardColorSelected >img, div#whiteBoardControlsDiv button > img:not(.dropdown-options-images){
        width: 60%;
    }    
    /*.wb-controls-first-row > div.btn-group.btn-group-md > a{*/
    #whiteBoardControlsDiv [class*="-wb"]{    	
        font-size: 27px;
    }
    #whiteBoardControlsDiv .icon-pen-wb{    	
        font-size: 33px;
    }
    #whiteBoardControlsDiv #first-btn-group [class*="-wb"] {
	    font-size: 22px;
	}
} 

@media (min-width: 2100px){
    div#whiteBoardControlsDiv a > img, #whiteboardColorSelected >img, div#whiteBoardControlsDiv button > img:not(.dropdown-options-images){
        width: 50%;
    }    
    /*.wb-controls-first-row > div.btn-group.btn-group-md > a{*/
    #whiteBoardControlsDiv [class*="-wb"]{    	
        font-size: 30px;
    }

    #whiteBoardControlsDiv .icon-pen-wb{    	
        font-size: 36px;
    }
    #whiteBoardControlsDiv #first-btn-group [class*="-wb"] {
	    font-size: 27px;
	}
} 

ul#brushSizes > button.btn.btn-default.icon-brush-size-wb,
ul#paintColor > button,
ul#textColor > button,
ul#lineTypes > button {
    display: inline-block !important;
}

#tools > .brushSizesDiv,
#tools > .brushSizesDiv {
    display: table;
    height: 6.5%;
}

#tools > .brushSizesDiv > button#brushSizeSelectedButton {
    height: 100%;
    /*padding-left: 37%;*/
}

#tools .icon-brush-size-wb:before,
#tools .icon-fill-color-wb:before,
#tools .icon-borders-wb:before{
    display: block;
}

#whiteboardColorSelectedButton,
#paintColorSelected,
#lineTypeSelectedButton{
    height: 100% !important;
}

#lineTypes > button.btn.btn-default.icon-line-wb,
#lineTypes > button.btn.btn-default.icon-borders-doted-wb{
    display: inline-block !important;
}

#wbPencilButton{
    padding-right: 12%;
}

#lineTypeSelectedButton:before{
    display: block !important;
}

.whiteBoardDiv {
    left: 16%;
}

@media only screen and (min-width: 1300px) {
    #whiteboardDiv {
        margin-left: 5%
    } 
}

@media only screen and (max-width: 1299px) {
    #whiteboardDiv {
        margin-left: 12%
    } 
}