/* Reset */

.btn:active,
.btn:focus {
    box-shadow: none;
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    -moz-box-shadow: none;
}


/* Buttons */


/* Grey*/

.btn {
    font-weight: bold;
    padding: 6px 10px;
    background: #f1f4f8;
    border: 1px solid #C7C7C7;
    color: #424242;
    font-size: 1.2rem;
    line-height: 1.15;
	white-space: normal;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
}

.btn:hover {
    background: #ebeff4
}

.btn:focus {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    -ms-box-shadow: none;
}

.btn.dark-grey {
    background: #424242;
    color: #fff;
}

.btn.teal,
.btn.active {
    background: #4C9797;
    color: #fff;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    border-color: #4C9797
}

.btn.active {
    background: #31A8A2
}


/* Back */

.btn.back span {
    display: inline-block;
    vertical-align: middle;
    color: #424242;
    font-size: 150%;
    margin: -2px 3px 0 -2px;
}


/* Number in orange circle */

.btn .num {
    color: #fff;
    background: #EF7E29;
    display: inline-block;
    font-weight: normal;
    width: 14px;
    height: 14px;
    line-height: 14px;
    vertical-align: middle;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    font-size: 80%;
    margin-top: -1px;
    margin-left: 3px;
}

header .buttons .btn {
    padding-left: 15px;
    padding-right: 15px;
    line-height: 18px;
}


/* Forms */

.btn.icon-search,
.btn.icon-clear-and-cancel {
    font-weight: bold;
    line-height: 1.1;
    font-family: Verdana, Helvetica, sans-serif!important;
}

.btn:before {
    margin-right: 10px;
}

.btn.icon-search:before {
    font-family: 'icomoon' !important;
    color: #425563
}

.btn.icon-clear-and-cancel:before {
    font-family: 'icomoon' !important;
    color: #EF7E29
}


/* Button Group */

ul.buttons {
    margin-bottom: 8px;
    padding: 0;
}

ul.buttons li {
    display: inline-block;
    margin: 0 3px 7px 0;
    padding: 0;
    list-style: none outside
}


/* Map Region Buttons */

ul.region-buttons {
    padding: 0;
}

ul.region-buttons li {
    list-style: none outside;
    margin: 0 0 10px 0;
    padding: 0;
}

ul.region-buttons li a.btn {
    background: #fff;
    text-align: left;
    display: block;
    border-radius: 10px;
    border: 0;
    line-height: 28px;
    padding-left: 23px;
    border: 1px solid #ffffff;
    box-shadow: 0px 1px 3px 0px rgba(188, 188, 188, 0.75);
    -webkit-box-shadow: 0px 1px 3px 0px rgba(188, 188, 188, 0.75);
    -moz-box-shadow: 0px 1px 3px 0px rgba(188, 188, 188, 0.75);
    position: relative
}

ul.region-buttons li a.btn span {
    position: absolute;
    right: 10px;
    top: 50%;
    display: inline-block;
    font-size: 200%;
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -webkit-transition: .2s;
    -o-transition: .2s;
    transform: translateY(-50%) rotate(-90deg);
    -webkit-transform: translateY(-50%) rotate(-90deg);
    -moz-transform: translateY(-50%) rotate(-90deg);
    -o-transform: translateY(-50%) rotate(-90deg);
    -ms-transform: translateY(-50%) rotate(-90deg);
    opacity: 0;
    -webkit-opacity: 0;
    -ms-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
}

ul.region-buttons li a.btn:hover {
    border: 1px solid;
    border-color: #EF7E29
}

ul.region-buttons li a.btn:hover span {
    right: 20px;
    opacity: 1;
    -webkit-opacity: 1;
    -ms-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
}