/**
* In this file, the Bootstrap CSS that needs to be tweaked are done.
*/


/**
*  Changing the z-index so that the input does not appear in front of the shadowy overlay
*  that appears when the navigation menu is appaerent (on small screen)
*/
.input-group .form-control {
    z-index: 1;
}

.form-control {
    display: block;
    width: 100%;
    /* height: 40px; */
    height: auto;
    padding: 8px 12px;
    color: black;
    background-color: #fff;
    background-image: none;
    border: 1px solid #555;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.input-group-addon {
    padding: 8px 12px;
    font-weight: normal;
    line-height: 1;
    color: black;
    text-align: center;
    background-color: #eee;
    border: 1px solid #555;
    border-radius: 4px;
    border-right: 0px;
}

.bootstrap-datetimepicker-widget table th.disabled,
.bootstrap-datetimepicker-widget table th.disabled:hover,
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover,
.bootstrap-datetimepicker-widget table td span.disabled,
.bootstrap-datetimepicker-widget table td span.disabled:hover {
  color: #afafaf;
}
  
.bootstrap-datetimepicker-widget table td.weekend:hover{
 	background-color:#eeeeee;
}
 
.bootstrap-datetimepicker-widget table td.weekend{
 	color:#ff0000;
 	font-weight: bold;
}
 
.bootstrap-datetimepicker-widget table td.holiday:hover{
    background-color:#eeeeee;
}
 
.bootstrap-datetimepicker-widget table td.holiday{
  	color:#ff0000;
 	font-weight: bold;
 }

.bootstrap-datetimepicker-widget table td.weekend.disabled,
.bootstrap-datetimepicker-widget table td.weekend.disabled:hover {
  color: #ff9595;
}
  
.bootstrap-datetimepicker-widget table td.vacation:hover{
 	background-color:#eeeeee;
}
 

.bootstrap-datetimepicker-widget table td.vacation{
 	color: #008800;
 	font-weight: bold;
}
 
.bootstrap-datetimepicker-widget table td.absence:hover{
 	background-color:#eeeeee;
}

.bootstrap-datetimepicker-widget table td.absence{
 	color: #ff732f;
  	font-weight: bold;
}
 
.bootstrap-datetimepicker-widget table td.active:hover{
 	background-color:#2b6799;
}

.bootstrap-datetimepicker-widget table td.active{
  background-color: #337ab7;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}


table {
    width: 100%;
	background-color: #fff;
}


@media screen and (max-width:600px){

	.tida-hide-on-overflow {
		width:100%;
		height:3em;
		overflow:hidden;
	}
	
	.tida-table-data td {
    	padding: 3px !important;
	}
}

.tida-table-data table, .tida-table-data th, .tida-table-data td
{
    font-size: 12px;
    border: 1px solid #E0E0E0;
    padding: 2px;
}

.tida-table-data th {
    background-color: #e6e9e8;
    padding: 2px;
    text-align: left;

}

.tida-table-data tbody tr {
	color: #141414;
}

.tida-table-data tr.disabledDate {
	/* color: #888; */
	color: #a6a6a6;
}

.tida-table-data tr.pendingRow {
	color: #008ae1;
}

.tida-table-data tr.deletedRow {
	color: #f44336;
}

.tida-table-data tr.pendingRow.warningRow {
	color: #005c97 !important;
}

.tida-table-data tr.deletedRow.warningRow {
	color: #bf1509 !important;
}

.tida-table-data tr.warningRow {
	background-color: #ffc057 !important;
}

.tida-table-data tr.warningRow:hover {
	background-color: #c7b494 !important;
}

tr.tida-table-pointer,
td.tida-table-pointer,
.tida-table-pointer tr {
    cursor: pointer;
}

tr.tida-tablerow-pointer {
	cursor: pointer;
}

.tida-table-data td {
    padding: 5px;
}

.tida-table-data td.warningCell {
	background-color: #ffc057 !important;
}

/* Zebra striping */
.tida-table-data tr:nth-of-type(even) { 
	background: #f3f3f3;
}

#absenceTable td:nth-child(1), #absenceTable td:nth-child(2) {
	white-space: nowrap;
}

td.tida-table-nested {
	padding: 0;
}

td.tida-table-nested tr:nth-of-type(even) { 
	background: none;
}

td.tida-table-nested table {
	background: none !important;
}
#main {
    flex: auto;
    overflow: auto;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
}

@media (max-width:992px){
    #tidaNavLogo {
        width: 80%;
    }
    #menuWrapperOverlay {
        transition: 0;
        background: rgb(0 0 0 / 20%);
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 2;
    }
}
@media (min-width:993px){
    #tidaNavLogo {
        width: 77%;
    }
}


.showMeNot{
	visibility: hidden;
}

.showMe{
	visibility: visible !important;
}

.background {
	background-size: cover;
	height:100%;
	overflow-y:auto;
}

.nonbackground {
	background-color: white;
}

.stickyTop {
    position:sticky; 
    top: 0; 
    padding-top:2px;
}

html, body {
	height:100%;
}

.checkedClass {
	opacity: 1;
}

.notCheckedClass{
	opacity : 0.3;
}

.ClockGreen {
    color: #2FE636 !important;
}

.clickableLabel {
	--webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.clickableLabel:hover {
	cursor: pointer;
	color: #02a6a6;
}

.pointer {
    cursor: pointer;
}

#readSysMsg {
    cursor: pointer;
}

#membersAutocomplete_dropdown {
  overflow-y: auto;
  border: 1px solid grey;
  max-height: 300px;
}

select:disabled,
input:disabled,
textarea:disabled {
    cursor: not-allowed !important;
    background-color: #eee !important;
    color: #666 !important;
}

header, footer {
    flex: none;
}

h2 {
    text-align: center;
}

p.no-margin {
    margin: 0 !important;
}
.buttonDescriptionTextDistancing {
    margin: 1px; 
    padding: 1px;
}
select.dropdown {
    /* height: 40px; */
    border: 0;
    border: 1px solid black;
    background: #fff url('/images/ic_keyboard_arrow_down_48px-128.png') no-repeat;
    background-size: 20px;
    background-position:  right 10px center;
    font-family: 'Arial';
    color: '#555' !important;
    padding: 8px 12px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
	border-radius: 4px;
}


textarea.myTheme{
    /* height: 40px; */
    border: 0;
    border: 1px solid black;
    font-family: 'Arial';
    color: '#555' !important;
    padding: 8px 12px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
	border-radius: 4px;
}

form textarea[ng-pattern].ng-invalid {
    border-color: red;
    outline: red;
    background: #f9ccca;
}

input.myTheme {
    /* height: 40px; */
    border: 0;
    border: 1px solid black;
    font-family: 'Arial';
    color: '#555' !important;
    padding: 8px 12px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
	border-radius: 4px;
}

form input[ng-pattern].ng-invalid {
    border-color: red;
    outline-color: red;
    background: #f9ccca;
}

form select.ng-invalid {
    border-color: red !important;
    background: #f9ccca;
}

H2 {
	text-align: center;
}

.Center {
	margin:0px auto;
	float: none;
}

.TextOverflow{
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40ch;
}

.DivOverflow{
	overflow: hidden;
	white-space: nowrap;
}

.dynamicTextarea{
	resize: none;
	overflow: hidden;
	min-height: 42px;
	max-height: 200px;
}

.tab-focus:focus,
.tab-focus:focus-visible {
	outline: 2px solid #8dcce7;
}

/* Overwrites w3-blue buttons */
.w3-btn i,
.w3-btn-block i {
    font-size: 16px;
}
.w3-btn,
.w3-btn-block {
    font-size: 14px;
    letter-spacing: 1px;
    -webkit-transition: all 0.1s ease, color 0.05s ease;
    transition: all 0.1s ease, color 0.05s ease;
}
.w3-btn:focus,
.w3-btn-block:focus-visible {
    outline: 3px solid #8dcce7;
}
.w3-btn:hover,
.w3-btn-block:hover {
    -webkit-box-shadow:  0 8px 12px 0px rgb(0 0 0 / 20%) !important;
    -moz-box-shadow:  0 8px 12px 0px rgb(0 0 0 / 20%) !important;
    box-shadow:  0 8px 12px 0px rgb(0 0 0 / 20%) !important;
}
.w3-btn.w3-blue,
.w3-btn-block.w3-blue {
    background-color: #2f5468 !important;
}
.w3-btn.w3-blue:hover,
.w3-btn-block.w3-blue:hover {
    background-color: #497693!important;
    color: #fff !important;
}
.w3-btn.w3-green,
.w3-btn-block.w3-green {
    background-color: #28a965 !important;
}
.w3-btn.w3-green:hover,
.w3-btn-block.w3-green:hover {
    background-color: #4fd88f!important;
    color: #fff !important;
}
.w3-btn.w3-red,
.w3-btn-block.w3-red {
    background-color: #dd5858 !important;
}
.w3-btn.w3-red:hover,
.w3-btn-block.w3-red:hover {
    background-color: #fa5c5c!important;
    color: #fff !important;
}

.tida-btn-action {
    background-color: #009688 !important;
}
.tida-btn-action:hover {
    background-color: #02af9e !important;
    color: #fff !important;
}

.tida-alert-wrapper {
    position: absolute;
    right: 0;
    z-index: 20000;
    top: 0;
    margin: 0 16px 0 0;
}

/*** Wraps an input and button to create a clear button in input field ***/
.tida-clear-button-wrapper {
    display: flex;
    flex-direction: row;
    margin-right: -28px;
}
.tida-clear-button {
    margin: 8px 0 0 5px;
    padding: 0;
    height: 20px;
    min-width: 20px;
    position: relative;
    border-radius: 100% !important;
    left: -28px;
    background: none !important;
    color: #000;
}
.tida-clear-button:hover,
.tida-clear-button:focus,
.tida-clear-button:active {
    color: red;
    box-shadow: none;
    outline: 1px dotted #cdcdcd;
}


/* Styling for weekly overview */
.hidden-from-view {
    margin: 0 !important;
}
.hidden-from-view > * {
    visibility: hidden;
    height: 0px;
    position: relative;
    z-index: -1;
    margin: 0 !important;
}
.weekly-overiew-content {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}
.weekly-overview-overlay {
    position: absolute;
    width: 100%;
    border-bottom: 1px solid rgb(182, 182, 182);
}
.weekly-overiew-header {
    padding-top: 1px;
    overflow-y: scroll;
    border-bottom: 1px solid rgb(147, 147, 147);
}
.weekly-overiew-footer {
    overflow-y: scroll;
    border-top: 1px solid rgb(147, 147, 147);
}
.weekly-overiew-footer p {
    margin-top: 10px;
}
.weekly-overview-hour-row {
    border-top: 1px solid rgb(182, 182, 182);
    text-align: right;
    padding-right: 4px;
}
.weekday-container {
    width: calc(100% / 8 - 4px);
    float: left;
    margin: 0 2px;
}
.weekday-header {
    text-align: center;
    padding-bottom: 3px;
}
.weekday-body {
    height: 1200px;
    border: 1px solid rgb(223, 219, 219);
    position: relative;
    background: repeating-linear-gradient(rgb(241, 239, 239), rgb(241, 239, 239) 49px, rgb(189, 186, 186) 49px, rgb(189, 186, 186) 50px);
}
.weekday-container.today .weekday-header {
    border: 1px solid #66abd7;
    margin-bottom: -1px;
    margin-top: -1px;
}
.weekday-container.today b {
    color: #66abd7;
}
.weekday-container.vacation .weekday-body {
    background: #d2e9db;
}
.weekday-container.vacation.pending .weekday-body {
    background: repeating-linear-gradient(45deg, #d5d5d5, #d5d5d5 3px, #d2e9db 3px, #d2e9db 12px);
}
.weekday-container.vacation.rejected .weekday-body {
    background: repeating-linear-gradient(45deg, rgb(251 206 206), rgb(251 206 206) 3px, #d2e9db 3px, #d2e9db 12px);
    border: 1px solid red;
}
.weekday-container.sick-leave .weekday-body {
    background: #fbe6c2;
}
.weekday-container.sick-leave.pending .weekday-body {
    background: repeating-linear-gradient(45deg, #d5d5d5, #d5d5d5 3px, #fbe6c2 3px, #fbe6c2 12px);
}
.weekday-container.sick-leave.rejected .weekday-body {
    background: repeating-linear-gradient(45deg, rgb(251 206 206), rgb(251 206 206) 3px, #fbe6c2 3px, #fbe6c2 12px);
    border: 1px solid red;
}
.weekday-container.holiday .weekday-header b {
    color: red !important;
}
.weekday-container.holiday .weekday-body {
    background: repeating-linear-gradient(#ffd9d9, #ffd9d9 49px, rgb(189, 186, 186) 49px, rgb(189, 186, 186) 50px);
}
.weekday-holiday {
    position: absolute;
    width: 100%;
    top: 50%;
    text-align: center;
    font-size: 16px;
    color: red;
}
.weekday-vacation {
    position: absolute;
    width: 100%;
    top: 50%;
    text-align: center;
    font-size: 16px;
    color: green;
}
.weekday-vacation span.Pending {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    color: black;
}
.weekday-vacation span.Rejected {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    color: red;
}
.weekday-sickleave {
    position: absolute;
    width: 100%;
    top: 50%;
    text-align: center;
    font-size: 16px;
    color: #d99014;
}
.weekday-sickleave span.Pending {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    color: black;
}
.weekday-sickleave span.Rejected {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    color: red;
}
.weekday-event {
    position: absolute;
    width: 100%;
    padding: 4px;
    font-size: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.weekday-event-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
}
.weekday-event-wrapper div:last-of-type p:last-of-type {
    margin-bottom: 0;
}
.weekday-event-status {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
}
.weekday-event-status.Rejected {
    color: red;
}
.weekday-event.timestamp {
    background-color: #d6e9f9;
    border: 1px solid #89b6df;
}
.weekday-event.travel {
    background-color: #c9cff1;
    border: 1px solid #979fcd;
}
.weekday-event.vacation {
    background-color: #d2e9db;
    border: 1px solid #7bc397;
}
.weekday-event.absence {
    background-color: #fbe6c2;
    border: 1px solid #d5b98a;
}
.weekday-event.timestamp.Pending {
    background: repeating-linear-gradient(45deg, #d5d5d5, #d5d5d5 3px, rgb(214, 233, 249) 3px, rgb(214, 233, 249) 12px);
    border: 1px solid #89b6df;
}
.weekday-event.timestamp.Rejected {
    background: repeating-linear-gradient(45deg, rgb(251 206 206), rgb(251 206 206) 3px, rgb(214, 233, 249) 3px, rgb(214, 233, 249) 12px);
    border: 1px solid red;
}
.weekday-event.travel.Pending {
    background: repeating-linear-gradient(45deg, #c3c3c3, #c3c3c3 3px, #c9cff1 3px, #c9cff1 12px);
    border: 1px solid #979fcd;
}
.weekday-event.travel.Rejected {
    background: repeating-linear-gradient(45deg, rgb(251 206 206), rgb(251 206 206) 3px, #c9cff1 3px, #c9cff1 12px);
    border: 1px solid red;
}
.weekday-event.vacation.Pending {
    background: repeating-linear-gradient(45deg, #d5d5d5, #d5d5d5 3px, #d2e9db 3px, #d2e9db 12px);
    border: 1px solid #b0d7bf;
}
.weekday-event.vacation.Rejected {
    background: repeating-linear-gradient(45deg, rgb(251 206 206), rgb(251 206 206) 3px, #d2e9db 3px, #d2e9db 12px);
    border: 1px solid red;
}
.weekday-event.absence.Pending {
    background: repeating-linear-gradient(45deg, #d5d5d5, #d5d5d5 3px, #fbe6c2 3px, #fbe6c2 12px);
    border: 1px solid #d5b98a;
}
.weekday-event.absence.Rejected {
    background: repeating-linear-gradient(45deg, rgb(251 206 206), rgb(251 206 206) 3px, #fbe6c2 3px, #fbe6c2 12px);
    border: 1px solid red;
}

.weekday-event.overlapping {
    width: 60%;
}
.weekday-event.absence.overlapping,
.weekday-event.vacation.overlapping {
    right: 0;
}

.weekday-event-wrapper::-webkit-scrollbar {
    width: 5px;
}
.weekday-event-wrapper::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 5px;
}
.weekday-event-wrapper::-webkit-scrollbar-thumb {
    background: rgb(66, 66, 66);
    border-radius: 5px;
}
.weekday-event-wrapper::-webkit-scrollbar-thumb:hover {
    background: #0072ba;
}

.weekday-footer {
    text-align: center;
}

.weekly-overiew-header::-webkit-scrollbar,
.weekly-overiew-footer::-webkit-scrollbar {
    visibility:  hidden;
}

.loading-spinner-wrapper {
    position: relative;
    margin-top: -60px;
    top: 300px;
    z-index: 1000;
}


/* Styling for input validation */

input.ng-invalid,
textarea.ng-invalid,
input.ng-invalid:active,
textarea.ng-invalid:active {
    border-color: red !important;
    background-color: #f9ccca !important;
}

input.ng-invalid:focus,
textarea.ng-invalid:focus,
input.ng-invalid:focus-visible,
textarea.ng-invalid:focus-visible {
    outline: 1px solid red !important;
}

.tida-validation-error {
    font-size: 12px;
    font-style: italic;
    color: red;
    padding: 3px 9px;
    border-radius: 4px;
    background-color: #f0ebeb;
}


/* Sweet alerts 2 tweak */

#swal2-html-container .timeout-warning {
    padding: 1em 0.3em;
    background-color: #fce3ce;
}

.tida-swal {
    z-index: 10060; /* Angularjs 1.6.1 has default ngModal as z-index 10000 */
}

.tida-swal-progress {
    background-color: #ee7f00 !important;
}


/* ngDialog tweak to center modals */

.ngdialog.ngdialog-theme-plain .ngdialog-content {
    margin: 0 !important;
    left: 50%;
    transform: translateX(-50%);
}

.ngdialog.ngdialog-theme-plain .ui-draggable-handle {
    cursor: move;
}
.dynamic-padding {
    padding-right: 16px;
}
@media (width <= 600px) {
    .dynamic-padding {
        padding-right: 0 !important;
    }
}
.tidaTooltip,
.tidaTooltipLarge {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tidaTooltip .tidaTooltiptext,
.tidaTooltipLarge .tidaTooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    margin-right: 10px;
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 110%;
}

.tidaTooltipLarge .tidaTooltiptext {
    text-align: left;
    padding: 7px;
    width: 240px;
    background-color: #f3f9fd;
    color: #626262;
    border: 1px solid #0072ba;
    border-radius: 0;
}

.tidaTooltip .tidaTooltiptext::after,
.tidaTooltipLarge .tidaTooltiptext::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

.tidaTooltipLarge .tidaTooltiptext::after {
    border-color: transparent transparent transparent #0072ba;
}

.tidaTooltip .tidaTooltiptextRight,
.tidaTooltipLarge .tidaTooltiptextRight {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 110%;
}

.tidaTooltip .tidaTooltiptextRight::after,
.tidaTooltipLarge .tidaTooltiptextRight::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

.tidaTooltip:hover .tidaTooltiptext,
.tidaTooltipLarge:hover .tidaTooltiptext {
    visibility: visible;
}

.tidaTooltip:hover .tidaTooltiptextRight,
.tidaTooltipLarge:hover .tidaTooltiptextRight {
    visibility: visible;
}

/* Tooltips for weekly overview */
.weekday-event.eventTooltip .tidaTooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 4px 2px;
    position: absolute;
    z-index: 1;
    /* top: 25%; */
    left: 110%;
}
.weekday-event.eventTooltip .tidaTooltiptext.leftAlign {
    right: 110%;
    left: initial;
}
.weekday-event.eventTooltip .tidaTooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
.weekday-event.eventTooltip .tidaTooltiptext.leftAlign::after {
    right: initial;
    left: 100%;
    border-color: transparent transparent transparent black;
}
.weekday-event.eventTooltip:hover .tidaTooltiptext {
    visibility: visible;
}
/**
* This CSS tweaks the w3 css style to fit the desired style.
*/

@media screen and (max-height:460px) and (max-width:990px){
	.w3-hide-small{display:none !important}
	.w3-container{padding:0px;}
}

@media screen and (max-width:600px){
	.w3-container{padding:0px;}
}

.w3-sidenav {
    width: 250px;
    z-index: 3;
}

.w3-opennav {
    cursor: pointer;
}

.showNav {
    margin-left: 250px;
}

.w3-accordion {
    cursor: pointer;
}

.w3-select {
    cursor: pointer;
}

.w3-btn-block:disabled {
    cursor:not-allowed;
    opacity:0.3;
}

.w3-sidenav a {
    cursor: pointer;
}

.msgDiv {
        opacity: 0;
}

.w3-label {
    white-space: nowrap;
}

html, body, .w3-main {
	font-size:13px;
    height: 100%;
    min-height: 100%;
    max-height: 100% !important;
}
body, .w3-main {
    display: flex;
    flex-direction: column;
}

.w3-blue {
	background-color: #0072ba;
}

.w3-disable{
	color: #a6a6a6 !important;
}

.w3-navbar li {
    white-space: nowrap;
}

/* Alternative size padding */

.w3-padding-right-8 {
    padding-right: 8px;
}
.w3-padding-left-8 {
    padding-left: 8px;
}

/* Responsive padding and margin */

@media (max-width:600px){
    .w3-padding-rs {
        padding: 8px 16px !important;
    }
    .w3-padding-left-rs {
        padding-left: 16px !important;
    }
    .w3-padding-left-rs-8 {
        padding-left: 8px !important;
    }
    .w3-padding-right-rs {
        padding-right: 16px !important;
    }
    .w3-padding-right-rs-8 {
        padding-right: 8px !important;
    }
    .w3-padding-top-rs {
        padding-top: 8px !important;
    }
    .w3-padding-bottom-rs {
        padding-bottom: 8px !important;
    }
    .w3-margin-rs {
        margin: 16px !important;
    }
    .w3-margin-left-rs {
        margin-left: 16px !important;
    }
    .w3-margin-right-rs {
        margin-right: 16px !important;
    }
    .w3-margin-top-rs {
        margin-top: 16px !important;
    }
    .w3-margin-bottom-rs {
        margin-bottom: 16px !important;
    }
}
@media (max-width:992px) and (min-width:601px){
    .w3-padding-rm {
        padding: 8px 16px !important;
    }
    .w3-padding-left-rm {
        padding-left: 16px !important;
    }
    .w3-padding-left-rm-8 {
        padding-left: 8px !important;
    }
    .w3-padding-right-rm {
        padding-right: 16px !important;
    }
    .w3-padding-right-rm-8 {
        padding-right: 8px !important;
    }
    .w3-padding-top-rm {
        padding-top: 8px !important;
    }
    .w3-padding-bottom-rm {
        padding-bottom: 8px !important;
    }
    .w3-margin-rm {
        margin: 16px !important;
    }
    .w3-margin-left-rm {
        margin-left: 16px !important;
    }
    .w3-margin-right-rm {
        margin-right: 16px !important;
    }
    .w3-margin-top-rm {
        margin-top: 16px !important;
    }
    .w3-margin-bottom-rm {
        margin-bottom: 16px !important;
    }
}
@media (min-width:993px){
    .w3-padding-rl {
        padding: 8px 16px !important;
    }
    .w3-padding-left-rl {
        padding-left: 16px !important;
    }
    .w3-padding-left-rl-8 {
        padding-left: 8px !important;
    }
    .w3-padding-right-rl {
        padding-right: 16px !important;
    }
    .w3-padding-right-rl-8 {
        padding-right: 8px !important;
    }
    .w3-padding-top-rl {
        padding-top: 8px !important;
    }
    .w3-padding-bottom-rl {
        padding-bottom: 8px !important;
    }
    .w3-margin-rl {
        margin: 16px !important;
    }
    .w3-margin-left-rl {
        margin-left: 16px !important;
    }
    .w3-margin-right-rl {
        margin-right: 16px !important;
    }
    .w3-margin-top-rl {
        margin-top: 16px !important;
    }
    .w3-margin-bottom-rl {
        margin-bottom: 16px !important;
    }
}
.tida-spinner {
	border: 16px solid #f3f3f3;
	border-top: 16px solid #3498db;
	border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

.tida-spinner-center {
	margin: auto;
	display: block;
	text-align: center;
}

.tida-spinner-v-center {
	margin: auto;
	display: block;
	text-align: center;
}

.tida-spinner-small {
	border: 8px solid #f3f3f3;
	border-top: 8px solid #3498db;
	border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

.tida-spinner-tiny {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}