/*---- Tutorial Post Type ----*/
#new_user_tutorials_steps_meta > .inside { padding: 0; margin: 0; }
#new_user_tutorials_steps_meta .add-step-container { padding: 12px; border-top: #ccc 1px solid; background: #F5F5F5; }
#new_user_tutorials_steps_meta .add-step-container #nut-add-step { float: right; }
#new_user_tutorials_steps_meta .add-step-container:after { content: ''; display: table; clear: both; }

#new_user_tutorials_steps_meta table { width: 100%; border-collapse: collapse; }
#new_user_tutorials_steps_meta table thead tr td { padding: 12px; }
#new_user_tutorials_steps_meta table thead tr td:not(:last-child) { border-right: solid 1px #ccc; }
#new_user_tutorials_steps_meta table thead { border-bottom: solid 1px #ccc; }

#new_user_tutorials_steps_meta table tr td { width: 3%; }
#new_user_tutorials_steps_meta table tr td:not(:first-child):not(:last-child) { width: 47%; }
#new_user_tutorials_steps_meta table tbody tr { opacity: 1; transition: .35s linear opacity; background: white; }
#new_user_tutorials_steps_meta table tbody tr:not(:last-child) { border-bottom: solid #e8e8e8 1px; }
#new_user_tutorials_steps_meta table tbody tr td { padding: 12px; }
#new_user_tutorials_steps_meta table tbody tr td:not(:last-child) { border-right: solid #e8e8e8 1px; }
#new_user_tutorials_steps_meta table tbody tr td:first-child { cursor: move; text-align: center; }
#new_user_tutorials_steps_meta table tbody tr td:last-child:before { content: "\f335"; font-family: dashicons; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 16px; color: inherit; transition: .35s linear color; }
#new_user_tutorials_steps_meta table tbody tr td:last-child { position: relative; cursor: pointer; }
#new_user_tutorials_steps_meta table tbody tr td:last-child:hover:before { color: red; }
#new_user_tutorials_steps_meta table tbody tr td input[type="text"] { margin-bottom: 12px; }

.nut-action-click-outline-type { margin: 0; }
.nut-action-click { margin: 0; height: 28px; vertical-align: top; margin-right: 12px; }



/*---- Material Popup Container ----*/
.nut-material-popup { box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); position: fixed; z-index: 1000000000; bottom: 40px; right: 20px; background: #ffffff; display: none; }
.nut-material-popup .nut-text { padding: 20px; font-size: 16px; transition: .35s linear all; }
.nut-material-popup .nut-buttons { border-top: 1px solid #ccc; padding: 10px 20px; background: #f2f2f2; }
.nut-material-popup .nut-buttons:after { content: ""; display: table; clear: both; }
.nut-material-popup .nut-buttons button { background: transparent; border: none; float: right; display: inline-block; color: black; font-weight: 600; cursor: pointer; font-size: 14px; transition: .35s linear all; outline: none !important; }
.nut-material-popup .nut-buttons button.nut-ok:hover { color: #4CAF50; }
.nut-material-popup .nut-buttons button.nut-cancel:hover { color: #F44336; }

.nut-highlight-overlay { position: absolute; z-index: 999999999; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.15); display: none; }
.nut-highlight-item { position: absolute; background: transparent; z-index: 1000000000; border-radius: 1000px; display: none; border: dashed 5px #fe2302; pointer-events: none; }
.nut-highlight-element { position: relative; z-index: 1000000001; }



/*---- Rotate animations ----*/
.nut-rotate-me {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 10s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate; 
    -moz-animation-duration: 10s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    animation-name: rotate; 
    animation-duration: 10s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

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

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

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