/* CSS for the public facing side of the plugin */
.yi-contracts-alert {
    font-weight:bold;
    font-size:1em;
    color:#d9232e;
}

#yi_contracts_filters {
	background-color: #EDEDED;
    padding: 1em;
    margin-bottom:1.5em;
    margin-top:1.5em;
    font-family:Montserrat,sans-serif!important;
}

#yi_contracts_filters .yi-contracts-filters-group {
	display:inline-block;
	width:31%;
    margin-right: 1%;
    position: relative;
    margin-bottom: 1em;
}

#yi_contracts_filters .label.full {
	margin-bottom:0;
}

#yi_contracts_filters .yi-contracts-filters-group > input,
#yi_contracts_filters .yi-contracts-filters-group select {
	width:100%;
}

#yi_contracts_filters .yi-contracts-filters-group > label {
	font-weight:bold;
	margin-right:5px;
}

#yi_contracts_filters .yi-contracts-filters-group .ms-options-wrap > button {
    height: 2.4375rem;
    margin: 0 0 0.5rem;
    padding: .5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #bbb;
    border-radius: 0;
    background-color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #505050;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.…nts='0,0 32,0 16,24' style='fill: rgb%28255, 255, 255%29'></polygon></svg>");
    background-origin: content-box;
    background-position: right -1rem center;
    background-repeat: no-repeat;
    background-size: 9px 6px;
    padding-right: 1.5rem;
    transition: box-shadow .5s,border-color .25s ease-in-out;
}

#yi_contracts_filters .yi-contracts-filters-group .ms-options li {
	margin-left:0;
	line-height:1.2em;
}

#yi_contracts_filters .yi-contracts-filters-group .ms-options label {
	padding:0 0 0 20px;
	font-size:0.9em;
}

#yi_contracts_filters .yi-contracts-filters-group .ms-options > ul input[type="checkbox"] {
	top:4px;
}

#yi_contracts_filters .yi-contracts-filters-group  .ms-options-wrap > .ms-options > ul > li.optgroup .label {
    font-size: 0.9em;
    padding: 5px;
    background-color: #EDEDED;
    color: #505050;
}

#yi_contracts_filters .yi-contracts-filters-group .ms-search {
    margin-bottom:10px;
}

#yi_contracts_filters #yi_contracts_filters_clear {
	font-size: 0.9em;
    color: #999;
    margin-left: 1em;
}

#yi_contracts_filters #yi_contracts_filters_clear:hover {
	cursor:pointer;
}

#yi_contracts {
	margin-bottom:1.5em;
}

#yi_contracts table tr td {
	font-family: Montserrat,sans-serif!important;
	font-size:14px;
}

#yi_contracts table tr td:first-child {
    white-space:nowrap;
}

#yi_contracts .dataTables_length label {
	font-size:0.8em;
}

#yi_contracts .dataTables_length select {
	width:auto;
	padding-left: 5px !important;
    padding-right: 5px !important;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    height:auto;
    font-size:1em;
}

#yi_contracts .dataTables_wrapper .dataTables_filter input {
	width:auto;
	display:inline-block;
	font-size:0.8em;
	padding:0.5em;
	height:auto;
}

#yi_contracts .dataTables_wrapper .dataTables_info {
	font-family:Montserrat,sans-serif!important;
	font-size:0.8em;
}

#yi_contracts .dataTables_paginate {
	font-family:Montserrat,sans-serif!important;
	font-size:0.8em;
}

#yi_contracts .yi-contracts-none {
	font-family:Montserrat,sans-serif!important;
	text-align:center;
}

#yi_contracts .button-disabled {
    background-color:#999;
    border-color:#999;
    color:#fff;
}

#yi_contracts .button-disabled:hover,
#yi_contracts .button-disabled:active,
#yi_contracts .button-disabled:focus {
    background-color:#999;
    border-color:#999;
    color:#fff;
    cursor:not-allowed;
}

#yi_buttons {
    background-color: #EDEDED;
    padding: 1em;
    margin: 3em 0;
    font-family: Montserrat,sans-serif!important;
}

#yi_buttons .button {
    border-radius: 15px !important;
    font-family: "Open Sans", sans-serif !important;
    text-transform: uppercase !important;
    font-weight: normal;
    padding: 5px 10px;
    background-color: #333;
    color: #fff;
    border: none;
    padding: 7px 20px;
    display:block;
    text-align:center;
}

#yi_buttons .button:hover,
#yi_buttons .button:active,
#yi_buttons .button:focus {
    text-decoration:none;
}

#yi_buttons .button-grid {
    display:flex;
    flex-wrap: wrap;
}

#yi_buttons .button-grid .button-col {
    flex: 1 0 21%; 
    margin: 1%;
}

#yi_buttons .button-grid .button-col:first-child {
    margin-left:0;
}

#yi_buttons .button-grid .button-col:last-child {
    margin-right:0;
}

@media (max-width:1200px) {
    #yi_buttons .button-grid .button-col {
        flex: 1 0 41%; 
    }
}

@media (max-width:700px) {
    #yi_buttons .button-grid .button-col {
        flex: 1 0 100%; 
    }
}